0
1
00:00:00,690 --> 00:00:07,170
So in the last lesson we looked at how we're able to change the background color of the body of our
1

2
00:00:07,170 --> 00:00:16,080
web page by simply injecting CSS code in the same line as our body HTML element.
2

3
00:00:16,140 --> 00:00:23,310
Now in this lesson we're going to look at how we can implement CSS code across the entire web page
3

4
00:00:23,520 --> 00:00:32,280
so we won't have to copy and paste the style attribute each time we want to change a particular element.
4

5
00:00:32,280 --> 00:00:39,570
So in order to do this we're going to go into the head section of our HTML page and just below the
5

6
00:00:39,570 --> 00:00:40,650
title,
6

7
00:00:40,650 --> 00:00:46,500
I'm going to add a style tag and I'm going to close it off as well.
7

8
00:00:47,700 --> 00:00:55,040
Now in between the style tag I'm going to select the HTML element that I want to affect.
8

9
00:00:55,080 --> 00:00:59,250
So let's first try this with our body element.
9

10
00:00:59,250 --> 00:01:05,910
So in order to select an HTML tag all you have to do is specify the name of the element you want
10

11
00:01:05,910 --> 00:01:09,050
to change which in this case is the body.
11

12
00:01:09,210 --> 00:01:16,590
And then you're going to create a set of curly braces inside which you're going to write your CSS code
12

13
00:01:16,950 --> 00:01:21,020
that will affect the style of the body element.
13

14
00:01:21,030 --> 00:01:24,450
So let's hit enter and give ourselves a bit more space.
14

15
00:01:24,630 --> 00:01:30,060
And let's also indent this so that it's nested inside our style tag.
15

16
00:01:30,060 --> 00:01:39,220
So here I can copy this line of code straight in like so.
16

17
00:01:39,630 --> 00:01:45,870
So the essential elements of any CSS code that you're going to write is going to be something that
17

18
00:01:45,870 --> 00:01:47,810
you want to affect.
18

19
00:01:47,820 --> 00:01:55,110
So in this case it’s the body of the page that we want to change and then it's what you want to change
19

20
00:01:55,110 --> 00:01:55,820
about it.
20

21
00:01:55,860 --> 00:02:00,740
So in this case it's the background color property that we want to affect.
21

22
00:02:00,780 --> 00:02:06,570
And finally what is the value that you're going to change it to which in this case is that nice color
22

23
00:02:06,570 --> 00:02:08,180
from our color palette.
23

24
00:02:08,280 --> 00:02:12,870
So I want to go ahead and just change this to a more obvious color.
24

25
00:02:12,870 --> 00:02:18,400
So back to that pretty ugly blue looking color that we had before.
25

26
00:02:18,630 --> 00:02:27,270
And I'm going to delete our inline CSS here and make it go back to just a simple body tag just so
26

27
00:02:27,270 --> 00:02:31,380
that we can confirm that our code is in fact working.
27

28
00:02:31,680 --> 00:02:39,240
So now if we hit save and we go back to our Web site and we hit refresh you can see that that change
28

29
00:02:39,240 --> 00:02:40,380
has worked.
29

30
00:02:40,380 --> 00:02:44,910
So we know that our CSS code is functional and it is working.
30

31
00:02:44,970 --> 00:02:51,390
Now sometimes when you're linking up CSS with your html file you might have forgotten a closing tag
31

32
00:02:51,420 --> 00:02:53,920
or you might have put it into the wrong place.
32

33
00:02:53,920 --> 00:02:59,490
For example you accidently had it inside the body instead of the head section and there's all sorts
33

34
00:02:59,490 --> 00:03:04,340
of reasons why your CSS and your HTML might not be linked together.
34

35
00:03:04,350 --> 00:03:10,740
So it's always a good idea just to change something really really dramatic so that you can just confirm
35

36
00:03:10,980 --> 00:03:20,310
that the entire style tag is working and it's affecting the appearance of your webpage.
36

37
00:03:20,700 --> 00:03:26,390
So now let's change this back to that prettier color that we had.
37

38
00:03:26,700 --> 00:03:30,230
And let's check to make sure that it's working.
38

39
00:03:30,450 --> 00:03:35,400
And the next thing that we're going to change is what we mentioned before, we want to change the style
39

40
00:03:35,460 --> 00:03:41,520
of something that occurs repeatedly in our code which is the horizontal rule.
40

41
00:03:41,620 --> 00:03:49,680
Now instead of having to write the style attribute inside each and every single one of these tags what
41

42
00:03:49,680 --> 00:03:57,600
I can do is I can simply select it here by saying let's change the style of all the horizontal rules
42

43
00:03:57,960 --> 00:04:05,090
and the property of the horizontal rule that I want to change is also it's background color.
43

44
00:04:05,310 --> 00:04:12,100
I don't like this gray ish thing that we've got here and I want it to just be pure white.
44

45
00:04:12,150 --> 00:04:21,870
So I want it's background color to be simply just white a CSS color that we can have access to just by
45

46
00:04:21,870 --> 00:04:24,500
writing the keyword white.
46

47
00:04:24,800 --> 00:04:33,280
So if we hit save and we head over to our website you'll notice that nothing changes when you refresh
47

48
00:04:33,280 --> 00:04:33,760
it.
48

49
00:04:34,080 --> 00:04:37,270
It hasn't changed in its appearance at all.
49

50
00:04:37,270 --> 00:04:49,860
So why is that? Well, it's really really important to realize that no website is completely unstyled.
50

51
00:04:49,880 --> 00:04:51,130
So what does that mean?
51

52
00:04:51,320 --> 00:04:59,570
Even before we've added any CSS code to our index.html, there is already some default CSS
52

53
00:04:59,660 --> 00:05:03,300
being applied by your browser.
53

54
00:05:03,490 --> 00:05:08,240
Now you can find out what the default CSS looks like
54

55
00:05:08,270 --> 00:05:10,430
by again searching for it.
55

56
00:05:10,430 --> 00:05:16,710
So let's search for browser default CSS and hit enter.
56

57
00:05:17,480 --> 00:05:22,090
And you can see that the first thing that we get is actually from W3 Schools.
57

58
00:05:22,190 --> 00:05:27,260
So I'm pretty agnostic towards which sources we use as long as they're useful.
58

59
00:05:27,380 --> 00:05:35,420
And Google's always pretty good at picking out which is the most used or rather most useful links and
59

60
00:05:35,420 --> 00:05:37,450
put them at the top of your searches.
60

61
00:05:37,460 --> 00:05:45,920
So if we look inside W3 Schools you can see that all these elements have default CSS values being
61

62
00:05:45,920 --> 00:05:48,280
applied by your browser.
62

63
00:05:48,380 --> 00:05:58,800
Now if we hit command F to find the horizontal rule then you can see all the default CSS that it has.
63

64
00:05:58,820 --> 00:06:02,420
Now let me just talk you through what all of this does.
64

65
00:06:02,690 --> 00:06:10,520
Now the first thing is that it sets a margin for a horizontal rule and then it sets the type or the
65

66
00:06:10,520 --> 00:06:14,750
style of our border to something called inset.
66

67
00:06:15,140 --> 00:06:19,000
And then it gives the border a width of one pixel.
67

68
00:06:19,280 --> 00:06:23,230
So what is this border style inset.
68

69
00:06:23,420 --> 00:06:32,750
Well let's take a look at border style CSS using MDN and you can see that there's a whole bunch
69

70
00:06:33,230 --> 00:06:38,450
of different keywords that you can use that changes the border style.
70

71
00:06:38,450 --> 00:06:46,640
Now you'll also find the default one which has the inset border style and this displays a border that
71

72
00:06:46,640 --> 00:06:56,300
makes the element look embedded and if you look really closely at our border it's kind of got
72

73
00:06:56,300 --> 00:06:57,400
that effect right.
73

74
00:06:57,530 --> 00:07:05,780
Even though it's not that nice looking that happens to be the default style that's specified by our
74

75
00:07:05,780 --> 00:07:06,980
browser.
75

76
00:07:06,980 --> 00:07:10,440
So let's change it to something that we want.
76

77
00:07:10,550 --> 00:07:14,110
Well we actually don't really want a border.
77

78
00:07:14,330 --> 00:07:20,330
All we want is just to have a single line without a border that is white in color.
78

79
00:07:20,330 --> 00:07:20,950
Right.
79

80
00:07:21,020 --> 00:07:29,300
So we can change the border style to none and we can override the default browser value by specifying
80

81
00:07:29,360 --> 00:07:32,780
a new value for it using CSS.
81

82
00:07:32,870 --> 00:07:39,220
So we're going to set border style to none.
82

83
00:07:39,330 --> 00:07:46,480
And if we hit save something surprising is going to happen when you refresh your website.
83

84
00:07:46,950 --> 00:07:50,100
Your horizontal rules have disappeared.
84

85
00:07:50,100 --> 00:07:51,740
Now why is that?
85

86
00:07:52,020 --> 00:07:59,580
Well one of the most important concepts in learning CSS is realizing that pretty much everything that
86

87
00:07:59,580 --> 00:08:08,280
exists on the web page are essentially just boxes and I can make those boxes appear by using the Chrome
87

88
00:08:08,280 --> 00:08:16,610
plugin I've got which is called pesticide and it highlights all of the boxes that we have on screen.
88

89
00:08:16,620 --> 00:08:19,830
Now the horizontal rule is no exception.
89

90
00:08:19,830 --> 00:08:30,090
It's also just a rectangle and that rectangle used to have a border specified by this border style and
90

91
00:08:30,090 --> 00:08:32,410
that border had a width.
91

92
00:08:32,580 --> 00:08:39,540
So it was one pixel on the top one pixel on the bottom one pixel on the left and one pixel on the right.
92

93
00:08:39,540 --> 00:08:47,480
Now by getting rid of that border by setting border style to none our rectangle now has no size.
93

94
00:08:47,490 --> 00:08:50,510
It's literally 0 pixels high.
94

95
00:08:50,670 --> 00:08:59,400
So in order to change this situation we need to change some of the CSS for the box to give it a height.
95

96
00:08:59,430 --> 00:09:05,040
So if you head over to devdocs.io and you search for height,
96

97
00:09:05,100 --> 00:09:10,750
the first one, the blue icon here, shows you that this is CSS related documentation.
97

98
00:09:10,860 --> 00:09:15,210
And if you click on it it takes you to this height CSS property.
98

99
00:09:15,600 --> 00:09:22,740
And this specifies the height of an element and you can read that as this thing changes the height of
99

100
00:09:22,740 --> 00:09:23,550
your box.
100

101
00:09:23,550 --> 00:09:32,190
So if we now give a horizontal rule a height let's say 2 pixels and we hit save.
101

102
00:09:32,190 --> 00:09:40,950
Once we hit refresh our box now has an actual dimension and you can see that here as well you can see
102

103
00:09:40,950 --> 00:09:48,600
that that tiny box now has a little bit of height associated with it whereas previously had zero pixels
103

104
00:09:48,600 --> 00:09:52,920
in height because only the border had a dimension to it.
104

105
00:09:53,250 --> 00:09:58,260
Now that height property isn't unique to just the horizontal rule.
105

106
00:09:58,440 --> 00:10:01,600
And this is the really interesting thing about CSS.
106

107
00:10:01,600 --> 00:10:09,060
Now once you realize that essentially everything in your web page is just a whole bunch of boxes and
107

108
00:10:09,120 --> 00:10:15,120
the properties of these boxes can be affected by changing the CSS code,
108

109
00:10:15,240 --> 00:10:22,650
then you can pretty much apply the same rules or the same changes to any of these boxes you choose.
109

110
00:10:22,650 --> 00:10:32,070
So for example if I wanted to select my image HTML element, then I could write img and I can change
110

111
00:10:32,100 --> 00:10:39,540
its height to something less extreme maybe something like 20 pixels and if I hit save and refresh
111

112
00:10:39,900 --> 00:10:50,070
then you'll see that the box for my image has now become super tiny and it is now only 20 pixels high.
112

113
00:10:50,070 --> 00:10:56,400
Now some of you might have tried to change the height of the body and you might have gotten stuck and
113

114
00:10:56,400 --> 00:10:59,660
wondered why did it not work for the body.
114

115
00:11:00,030 --> 00:11:09,030
Well it's down to the fact that the body has some default values that prevents our changing the height
115

116
00:11:09,660 --> 00:11:15,750
and we're going to look at some of those things like display block in later lessons in this module to
116

117
00:11:15,750 --> 00:11:17,740
understand why that is.
117

118
00:11:18,060 --> 00:11:25,650
But for now let's get rid of this style that we apply to the image and let's hit save and let's see
118

119
00:11:25,650 --> 00:11:27,560
our web site as it is.
119

120
00:11:27,660 --> 00:11:35,190
Now if you go into Dev Docs and you go to the CSS section, then you can look at all of these subsections
120

121
00:11:35,310 --> 00:11:41,160
of how you can change the appearance of any element. One of the things that you can change
121

122
00:11:41,310 --> 00:11:46,080
in addition to the height is actually the width of your element.
122

123
00:11:46,200 --> 00:11:56,070
So we can go and say the width of our horizontal rule should only ever be 100 pixels and we hit save
123

124
00:11:56,190 --> 00:11:57,640
and we refresh.
124

125
00:11:57,900 --> 00:12:00,800
And you see that this is 100 pixels wide.
125

126
00:12:01,050 --> 00:12:08,250
Now sometimes you might want the width to change depending on whether you're viewing your web site on
126

127
00:12:08,250 --> 00:12:14,570
a smartphone or whether you're viewing on a browser or if somebody is viewing it maybe on an iPad.
127

128
00:12:14,850 --> 00:12:24,200
So you might not want to specify a straight up hard coded value such as hundred pixels.
128

129
00:12:24,270 --> 00:12:27,820
You can also specify a percentage.
129

130
00:12:27,990 --> 00:12:35,710
So you can say the width should be 30 percent of the entire width of the web page.
130

131
00:12:35,710 --> 00:12:43,260
Now when you hit refresh you can see that that line is much wider when our entire page is wider.
131

132
00:12:43,450 --> 00:12:49,330
And when our page gets narrower it always remains 30 percent of the entire width.
132

133
00:12:49,330 --> 00:12:52,570
So that's another way that you can specify a size.
133

134
00:12:52,570 --> 00:12:59,530
Now as a challenge I want you to use this page on MDN, the border style property,
134

135
00:12:59,530 --> 00:13:07,840
and looking at all the different types of border styles I want you to be able to make this line similar
135

136
00:13:07,930 --> 00:13:16,750
to what Sean has here, which is just a few gray dots, maybe three or four or maybe just 10 percent of
136

137
00:13:16,750 --> 00:13:18,030
the page.
137

138
00:13:18,100 --> 00:13:26,460
So pause the video and see if you can change the CSS in order to make that line look like this.
138

139
00:13:31,690 --> 00:13:32,030
All right.
139

140
00:13:32,030 --> 00:13:33,970
So how did that go?
140

141
00:13:34,100 --> 00:13:42,750
Now in order to make our horizontal rule look similar to this we know that we can change the border style.
141

142
00:13:42,980 --> 00:13:49,490
And one of those styles is the dotted style and MDN very helpfully
142

143
00:13:49,490 --> 00:13:55,990
has this interactive box where we can change the properties of these borders.
143

144
00:13:56,210 --> 00:14:00,130
So we already know that we can have a border to be set to none.
144

145
00:14:00,140 --> 00:14:02,270
We're going to need it to be dotted.
145

146
00:14:02,510 --> 00:14:14,740
But if we simply change this border style to dotted and hit save then you can see if I zoom in
146

147
00:14:16,300 --> 00:14:25,360
that yes I have a border that's dotted around my horizontal rule but this looks nothing like what he's
147

148
00:14:25,360 --> 00:14:26,890
got over here.
148

149
00:14:26,890 --> 00:14:28,890
So how can we change this?
149

150
00:14:29,050 --> 00:14:36,550
Well if we only want to have a single border then we have to turn our height down to zero again.
150

151
00:14:36,550 --> 00:14:42,430
So we have a box that's 0 pixels high that only has a border.
151

152
00:14:42,430 --> 00:14:50,020
So you can either change the height to zero pixels or delete it outright and that will also make it
152

153
00:14:50,020 --> 00:14:51,550
zero pixels high.
153

154
00:14:51,550 --> 00:14:58,420
Now if I refresh you can see that we've now got a horizontal rule that's 0 pixels high.
154

155
00:14:58,780 --> 00:15:01,380
And we've got a border around it.
155

156
00:15:01,390 --> 00:15:09,040
So if we have a look here the syntax section it says that when one value for border style is specified
156

157
00:15:09,460 --> 00:15:15,700
then it applies the same style to all four sides and that's pretty much what we're getting here.
157

158
00:15:16,580 --> 00:15:19,990
We’re getting that dotted style across all four sides.
158

159
00:15:20,070 --> 00:15:27,210
Now when we specified two values then the first styles applied to the top and bottom borders and the
159

160
00:15:27,210 --> 00:15:34,620
second to the left and right when three values are specified then the first one applies to the top the
160

161
00:15:34,620 --> 00:15:38,320
second to the left and the right and the third the bottom.
161

162
00:15:38,520 --> 00:15:42,820
Or you can also specify all four values of all four sides.
162

163
00:15:42,840 --> 00:15:49,530
So knowing this we can actually change our border style to dotted.
163

164
00:15:49,620 --> 00:15:53,390
So that gets applied to the top border.
164

165
00:15:53,580 --> 00:15:58,740
And then we can specify none for the rest of the borders.
165

166
00:15:58,860 --> 00:16:02,760
And if we hit save, we go back over here, we refresh,
166

167
00:16:02,970 --> 00:16:07,360
you see that we now only have the top border showing.
167

168
00:16:07,650 --> 00:16:14,340
Now an alternative way that you might have worked out is by simply changing the border top style so
168

169
00:16:14,340 --> 00:16:23,400
we could say that the entire border style is none but the border top style is going to be dotted and
169

170
00:16:23,430 --> 00:16:29,840
if you hit save and you refresh you can see that it's exactly the same effect.
170

171
00:16:30,090 --> 00:16:38,910
Because we're specifying something that is more specific than this property we're affecting only this
171

172
00:16:38,970 --> 00:16:40,110
particular thing.
172

173
00:16:40,500 --> 00:16:47,830
And now our background color is redundant because our main box has no background because it has no height.
173

174
00:16:48,090 --> 00:16:49,330
So we can get rid of that.
174

175
00:16:49,380 --> 00:16:57,300
Now in order to make this line look more like this line we have to change the size of the dots and also
175

176
00:16:57,300 --> 00:17:03,600
the color of the dots and you can see that we can change the color by simply changing the border color
176

177
00:17:03,600 --> 00:17:08,880
property so we can change it to grey and we can also change the border width.
177

178
00:17:09,120 --> 00:17:18,530
So if we say 20 pixels then the dots get a lot bigger whereas five pixels you only get very tiny dots.
178

179
00:17:18,890 --> 00:17:25,780
So let's go over here and add some more properties that we want to change so we're going to change the
179

180
00:17:25,780 --> 00:17:35,080
border color to grey and we're going to change the border height the border and then we're going to
180

181
00:17:35,080 --> 00:17:37,890
change the border width to 
181

182
00:17:37,930 --> 00:17:43,610
let’s try 20 pixels and let's see what that now looks like.
182

183
00:17:43,750 --> 00:17:46,070
Oh that's absolutely massive.
183

184
00:17:46,150 --> 00:17:48,610
And our border is still black.
184

185
00:17:48,610 --> 00:17:53,850
So what's going on here is because we have a typo in the word grey.
185

186
00:17:53,950 --> 00:17:59,200
And you can see that using our packages that we've installed in Atom, when it’s actually a valid color
186

187
00:17:59,200 --> 00:17:59,980
code,
187

188
00:17:59,980 --> 00:18:04,910
it gets highlighted in a different color compared to something that doesn't exist.
188

189
00:18:06,070 --> 00:18:14,530
So let's change that down to maybe let's try 10 pixels and that is now looking pretty similar to that
189

190
00:18:14,530 --> 00:18:19,360
size maybe smaller still maybe 5 pixels.
190

191
00:18:23,790 --> 00:18:25,070
That looks pretty similar.
191

192
00:18:25,410 --> 00:18:30,460
And we can change it down to be a lot smaller in width as well.
192

193
00:18:30,510 --> 00:18:39,290
So let's say maybe put the width as maybe 10 percent or even smaller maybe 5 percent yeah that looks
193

194
00:18:39,290 --> 00:18:40,080
pretty decent.
194

195
00:18:40,100 --> 00:18:48,780
So we've now more or less implemented what we see over here simply by changing the CSS style of our
195

196
00:18:48,800 --> 00:18:50,070
horizontal rule.
196

197
00:18:50,070 --> 00:18:57,980
Now there's still a bit of a problem though because we've changed our horizontal rule to look exactly
197

198
00:18:57,980 --> 00:18:59,560
the way that we wanted to.
198

199
00:18:59,780 --> 00:19:03,170
And we of course want this to be consistent across our web site.
199

200
00:19:03,410 --> 00:19:10,070
And we also want our background color to carry over to all our other web pages on our web site.
200

201
00:19:10,490 --> 00:19:19,850
But if we look inside My Hobbies or Contact Me it still looks exactly the same way as it did before.
201

202
00:19:20,150 --> 00:19:27,170
And we're going to have to copy this entire style section over to the Contact Me header as well as the
202

203
00:19:27,170 --> 00:19:28,280
Hobbies header.
203

204
00:19:28,340 --> 00:19:36,700
So that's kind of a lot of work especially if you end up with a web site with you know 200 pages then
204

205
00:19:36,950 --> 00:19:43,530
it's not a good idea to have to copy this over and change it in every single place.
205

206
00:19:43,550 --> 00:19:53,210
This might be easier than using inline CSS as we did in the last lesson but it's still quite repetitive.
206

207
00:19:53,240 --> 00:20:02,300
What we really want is to have a single location where when we change the CSS styles in that one location
207

208
00:20:02,630 --> 00:20:08,890
then everything gets reflected across our web site in all of the pages.
208

209
00:20:08,960 --> 00:20:15,710
So that is what we're going to learn about in the next lesson where we look into how we can create external
209

210
00:20:15,790 --> 00:20:17,630
CSS for our web site.
210

211
00:20:17,630 --> 00:20:21,240
So stay tuned and I will see you in the next lesson.