So in the last lesson we looked at how we're able to change the background color of the body of our 1
web page by simply injecting CSS code in the same line as our body HTML element. 2
Now in this lesson we're going to look at how we can implement CSS code across the entire web page 3
so we won't have to copy and paste the style attribute each time we want to change a particular element. 4
So in order to do this we're going to go into the head section of our HTML page and just below the 5
title, 6
I'm going to add a style tag and I'm going to close it off as well. 7
Now in between the style tag I'm going to select the HTML element that I want to affect. 8
So let's first try this with our body element. 9
So in order to select an HTML tag all you have to do is specify the name of the element you want 10
to change which in this case is the body. 11
And then you're going to create a set of curly braces inside which you're going to write your CSS code 12
that will affect the style of the body element. 13
So let's hit enter and give ourselves a bit more space. 14
And let's also indent this so that it's nested inside our style tag. 15
So here I can copy this line of code straight in like so. 16
So the essential elements of any CSS code that you're going to write is going to be something that 17
you want to affect. 18
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
about it. 20
So in this case it's the background color property that we want to affect. 21
And finally what is the value that you're going to change it to which in this case is that nice color 22
from our color palette. 23
So I want to go ahead and just change this to a more obvious color. 24
So back to that pretty ugly blue looking color that we had before. 25
And I'm going to delete our inline CSS here and make it go back to just a simple body tag just so 26
that we can confirm that our code is in fact working. 27
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
has worked. 29
So we know that our CSS code is functional and it is working. 30
Now sometimes when you're linking up CSS with your html file you might have forgotten a closing tag 31
or you might have put it into the wrong place. 32
For example you accidently had it inside the body instead of the head section and there's all sorts 33
of reasons why your CSS and your HTML might not be linked together. 34
So it's always a good idea just to change something really really dramatic so that you can just confirm 35
that the entire style tag is working and it's affecting the appearance of your webpage. 36
So now let's change this back to that prettier color that we had. 37
And let's check to make sure that it's working. 38
And the next thing that we're going to change is what we mentioned before, we want to change the style 39
of something that occurs repeatedly in our code which is the horizontal rule. 40
Now instead of having to write the style attribute inside each and every single one of these tags what 41
I can do is I can simply select it here by saying let's change the style of all the horizontal rules 42
and the property of the horizontal rule that I want to change is also it's background color. 43
I don't like this gray ish thing that we've got here and I want it to just be pure white. 44
So I want it's background color to be simply just white a CSS color that we can have access to just by 45
writing the keyword white. 46
So if we hit save and we head over to our website you'll notice that nothing changes when you refresh 47
it. 48
It hasn't changed in its appearance at all. 49
So why is that? Well, it's really really important to realize that no website is completely unstyled. 50
So what does that mean? 51
Even before we've added any CSS code to our index.html, there is already some default CSS 52
being applied by your browser. 53
Now you can find out what the default CSS looks like 54
by again searching for it. 55
So let's search for browser default CSS and hit enter. 56
And you can see that the first thing that we get is actually from W3 Schools. 57
So I'm pretty agnostic towards which sources we use as long as they're useful. 58
And Google's always pretty good at picking out which is the most used or rather most useful links and 59
put them at the top of your searches. 60
So if we look inside W3 Schools you can see that all these elements have default CSS values being 61
applied by your browser. 62
Now if we hit command F to find the horizontal rule then you can see all the default CSS that it has. 63
Now let me just talk you through what all of this does. 64
Now the first thing is that it sets a margin for a horizontal rule and then it sets the type or the 65
style of our border to something called inset. 66
And then it gives the border a width of one pixel. 67
So what is this border style inset. 68
Well let's take a look at border style CSS using MDN and you can see that there's a whole bunch 69
of different keywords that you can use that changes the border style. 70
Now you'll also find the default one which has the inset border style and this displays a border that 71
makes the element look embedded and if you look really closely at our border it's kind of got 72
that effect right. 73
Even though it's not that nice looking that happens to be the default style that's specified by our 74
browser. 75
So let's change it to something that we want. 76
Well we actually don't really want a border. 77
All we want is just to have a single line without a border that is white in color. 78
Right. 79
So we can change the border style to none and we can override the default browser value by specifying 80
a new value for it using CSS. 81
So we're going to set border style to none. 82
And if we hit save something surprising is going to happen when you refresh your website. 83
Your horizontal rules have disappeared. 84
Now why is that? 85
Well one of the most important concepts in learning CSS is realizing that pretty much everything that 86
exists on the web page are essentially just boxes and I can make those boxes appear by using the Chrome 87
plugin I've got which is called pesticide and it highlights all of the boxes that we have on screen. 88
Now the horizontal rule is no exception. 89
It's also just a rectangle and that rectangle used to have a border specified by this border style and 90
that border had a width. 91
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
Now by getting rid of that border by setting border style to none our rectangle now has no size. 93
It's literally 0 pixels high. 94
So in order to change this situation we need to change some of the CSS for the box to give it a height. 95
So if you head over to devdocs.io and you search for height, 96
the first one, the blue icon here, shows you that this is CSS related documentation. 97
And if you click on it it takes you to this height CSS property. 98
And this specifies the height of an element and you can read that as this thing changes the height of 99
your box. 100
So if we now give a horizontal rule a height let's say 2 pixels and we hit save. 101
Once we hit refresh our box now has an actual dimension and you can see that here as well you can see 102
that that tiny box now has a little bit of height associated with it whereas previously had zero pixels 103
in height because only the border had a dimension to it. 104
Now that height property isn't unique to just the horizontal rule. 105
And this is the really interesting thing about CSS. 106
Now once you realize that essentially everything in your web page is just a whole bunch of boxes and 107
the properties of these boxes can be affected by changing the CSS code, 108
then you can pretty much apply the same rules or the same changes to any of these boxes you choose. 109
So for example if I wanted to select my image HTML element, then I could write img and I can change 110
its height to something less extreme maybe something like 20 pixels and if I hit save and refresh 111
then you'll see that the box for my image has now become super tiny and it is now only 20 pixels high. 112
Now some of you might have tried to change the height of the body and you might have gotten stuck and 113
wondered why did it not work for the body. 114
Well it's down to the fact that the body has some default values that prevents our changing the height 115
and we're going to look at some of those things like display block in later lessons in this module to 116
understand why that is. 117
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
our web site as it is. 119
Now if you go into Dev Docs and you go to the CSS section, then you can look at all of these subsections 120
of how you can change the appearance of any element. One of the things that you can change 121
in addition to the height is actually the width of your element. 122
So we can go and say the width of our horizontal rule should only ever be 100 pixels and we hit save 123
and we refresh. 124
And you see that this is 100 pixels wide. 125
Now sometimes you might want the width to change depending on whether you're viewing your web site on 126
a smartphone or whether you're viewing on a browser or if somebody is viewing it maybe on an iPad. 127
So you might not want to specify a straight up hard coded value such as hundred pixels. 128
You can also specify a percentage. 129
So you can say the width should be 30 percent of the entire width of the web page. 130
Now when you hit refresh you can see that that line is much wider when our entire page is wider. 131
And when our page gets narrower it always remains 30 percent of the entire width. 132
So that's another way that you can specify a size. 133
Now as a challenge I want you to use this page on MDN, the border style property, 134
and looking at all the different types of border styles I want you to be able to make this line similar 135
to what Sean has here, which is just a few gray dots, maybe three or four or maybe just 10 percent of 136
the page. 137
So pause the video and see if you can change the CSS in order to make that line look like this. 138
All right. 139
So how did that go? 140
Now in order to make our horizontal rule look similar to this we know that we can change the border style. 141
And one of those styles is the dotted style and MDN very helpfully 142
has this interactive box where we can change the properties of these borders. 143
So we already know that we can have a border to be set to none. 144
We're going to need it to be dotted. 145
But if we simply change this border style to dotted and hit save then you can see if I zoom in 146
that yes I have a border that's dotted around my horizontal rule but this looks nothing like what he's 147
got over here. 148
So how can we change this? 149
Well if we only want to have a single border then we have to turn our height down to zero again. 150
So we have a box that's 0 pixels high that only has a border. 151
So you can either change the height to zero pixels or delete it outright and that will also make it 152
zero pixels high. 153
Now if I refresh you can see that we've now got a horizontal rule that's 0 pixels high. 154
And we've got a border around it. 155
So if we have a look here the syntax section it says that when one value for border style is specified 156
then it applies the same style to all four sides and that's pretty much what we're getting here. 157
We’re getting that dotted style across all four sides. 158
Now when we specified two values then the first styles applied to the top and bottom borders and the 159
second to the left and right when three values are specified then the first one applies to the top the 160
second to the left and the right and the third the bottom. 161
Or you can also specify all four values of all four sides. 162
So knowing this we can actually change our border style to dotted. 163
So that gets applied to the top border. 164
And then we can specify none for the rest of the borders. 165
And if we hit save, we go back over here, we refresh, 166
you see that we now only have the top border showing. 167
Now an alternative way that you might have worked out is by simply changing the border top style so 168
we could say that the entire border style is none but the border top style is going to be dotted and 169
if you hit save and you refresh you can see that it's exactly the same effect. 170
Because we're specifying something that is more specific than this property we're affecting only this 171
particular thing. 172
And now our background color is redundant because our main box has no background because it has no height. 173
So we can get rid of that. 174
Now in order to make this line look more like this line we have to change the size of the dots and also 175
the color of the dots and you can see that we can change the color by simply changing the border color 176
property so we can change it to grey and we can also change the border width. 177
So if we say 20 pixels then the dots get a lot bigger whereas five pixels you only get very tiny dots. 178
So let's go over here and add some more properties that we want to change so we're going to change the 179
border color to grey and we're going to change the border height the border and then we're going to 180
change the border width to 181
let’s try 20 pixels and let's see what that now looks like. 182
Oh that's absolutely massive. 183
And our border is still black. 184
So what's going on here is because we have a typo in the word grey. 185
And you can see that using our packages that we've installed in Atom, when it’s actually a valid color 186
code, 187
it gets highlighted in a different color compared to something that doesn't exist. 188
So let's change that down to maybe let's try 10 pixels and that is now looking pretty similar to that 189
size maybe smaller still maybe 5 pixels. 190
That looks pretty similar. 191
And we can change it down to be a lot smaller in width as well. 192
So let's say maybe put the width as maybe 10 percent or even smaller maybe 5 percent yeah that looks 193
pretty decent. 194
So we've now more or less implemented what we see over here simply by changing the CSS style of our 195
horizontal rule. 196
Now there's still a bit of a problem though because we've changed our horizontal rule to look exactly 197
the way that we wanted to. 198
And we of course want this to be consistent across our web site. 199
And we also want our background color to carry over to all our other web pages on our web site. 200
But if we look inside My Hobbies or Contact Me it still looks exactly the same way as it did before. 201
And we're going to have to copy this entire style section over to the Contact Me header as well as the 202
Hobbies header. 203
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
it's not a good idea to have to copy this over and change it in every single place. 205
This might be easier than using inline CSS as we did in the last lesson but it's still quite repetitive. 206
What we really want is to have a single location where when we change the CSS styles in that one location 207
then everything gets reflected across our web site in all of the pages. 208
So that is what we're going to learn about in the next lesson where we look into how we can create external 209
CSS for our web site. 210
So stay tuned and I will see you in the next lesson.