Hey, guys. 1
Today we're going to learn all about the CSS Cascade and you're going to understand why it's actually 2
called a Cascading Style Sheet after completing this lesson. 3
So what exactly is the meaning of the cascading part of the cascading style sheet? 4
Well, it's really only relevant when we think about multiple different conflicting CSS rules. 5
So if you have different rules that target the same element, for example, an h1, then we have to 6
determine which one is higher up in the hierarchy. 7
And this method of working out which of the rules actually get applied and which ones get ignored is 8
how our cascade comes to be. 9
Imagine if you have a cascade where there is a pool at the top and then there is another one at the 10
bottom. 11
If we think about how the rule gets applied, then the browser is going to look at the water level. 12
Imagine if this rule gets applied first, and then as the water falls down the cascade, it sees another 13
rule that's applying to the same element. 14
Then you will see this style, number one being applied. 15
So multiple styles can be applied to the same thing, but because of the order of importance, the one 16
that is the most important once you've finished the cascade is the one the user actually sees on screen. 17
Here's an example. 18
Let's say we've got an ordered list which has three list items, and then in our styles.css we set all 19
of the list items to have a green color. 20
Now, once you run the code at this point, everything is going to turn green. 21
And now we have a list of three ordered-list items, all with green text. 22
Now, however, if one of those list items happened to have an inline style where we've got the style 23
attribute being set and we set it to a different color in this case, red, what do you think will happen 24
when we run this updated code? 25
Well, that is where our cascade comes in. 26
The first level of applying style comes from the external stylesheet, and then it's going to look to 27
see, well, maybe there are internal styles being applied via the style tag, and if there aren't any, 28
then it's going to look at the next level and see that, "Oh, are there any inline styles being applied?" 29
And this is the final style that gets applied to this particular list item. 30
And so in the end we end up with everything being green. 31
But then in the last minute this one gets changed to red because of the way the Cascade works. 32
There are four broad categories which we look at when we're determining the overall level of importance 33
of a CSS rule, 34
and these categories are Position, Specificity, Type and importance. 35
And I'm going to go through each of these with a code example. 36
The first thing we look at at the very top of the cascade is whether if a rule is at a higher or lower 37
position in the CSS relative to other rules. 38
Notice here I've got two rules applying to the same thing and setting the same property. 39
I'm trying to set the color of the text red, but I'm also trying to set it blue. 40
Well, in fact they both happen, 41
but the one that is lower down simply replaces the previous one. 42
So first it becomes red and then immediately becomes blue. 43
So this is what you're going to see on screen. 44
The position of a CSS rule can apply to the position within the curly braces of a selector, but it 45
could also be that you target the same element lower down in this. 46
So I could target the li again down here and I could set the color to green. 47
And in this case, because this is even lower down than these two positions. 48
So this is one, two and three, then this one is going to be the final one that will see. The lower 49
down in a CSS external file or in an internal style element 50
the more important it is. If we're looking at this cascade, a rule that gets applied here will then 51
be replaced by a rule that gets applied here and finally here. 52
So the lower down the file, the rule is, the more 53
more important, it is. Now the next category is the Specificity. 54
And CSS specificity refers to how specific a selector is in terms of the elements that you're applying the 55
CSS rule to. 56
As an example, let's say we create a list item element and we give it an ID that's equal to " first-id", 57
and then we give it a class that's equal to "first-class," 58
and then finally we give it the attribute of "draggable" as well. 59
And this is our opening tag for our list item element. 60
Now, if we look at this element and we think about the different ways that we can target this element, 61
then these four CSS rules will all target this particular element, 62
but they have different Specificity and they're listed in order. 63
The first one selects all the list-item elements, so there could be many other list-item elements in 64
our HTML file. 65
So this is the least specific. 66
It's the element selector. 67
The next level of Specificity is the class selector. 68
Remember, the class selector starts with a dot (.) and this will select all the other list elements that 69
have this class name, "first-class". 70
And because we can have multiple different elements with the same class for this reason it is more specific 71
than element, but it's also not the most specific way of selecting an element. 72
The next one is selecting an attribute. Even though most sources will tell you that attribute and class 73
are actually the same level of specificity if you try it out, 74
in most cases, the attribute will override the class. 75
In this case, we're selecting on this attribute of "draggable" and we're turning the list-item that has 76
that attribute set to the color of purple. 77
And at this point of our code, if we didn't go any further, our text would look purple. 78
So the final level of Specificity and the most specific is the ID selector, which is denoted by the 79
pound sign or the hashtag sign (#). 80
And this is the most specific because theoretically on a single web page you should only have one particular 81
ID name. 82
So it essentially targets only one element on the page. 83
So the order of specificity is ID, attribute, class and element. 84
If we think about our cascade starting up here, firstly we look to see if there are any element selectors 85
that target a particular element, 86
then we look at class, then we look at attribute and finally we look at ID, and if we applied the 87
CSS rules in this order, then the final one will be the one that will be applied. 88
So if all of these rules were applied to this particular element, then finally what we would see is 89
the text would be orange. 90
Now the next category is the type. 91
We know that there are three different ways that we can apply CSS to a particular file. 92
We can use the external stylesheet which is done using the link element, linking to a particular file 93
in our project folder. 94
Then there is internal CSS, which is done through the style element and putting the CSS in between 95
the open and closing brackets of the style element. 96
And finally there is the inline style where the CSS is applied through the style attribute inside the 97
opening tag of an actual HTML element. 98
In terms of the cascade, the most important are the styles that are applied inline because this targets 99
only one specific element. 100
It's just this h1. 101
It doesn't matter if you have ten other h1's. 102
This style is only going to be applied to this particular element. 103
The next one is the internal, because the internal stylesheet only exists inside one web page, whereas 104
the external stylesheet can actually be applied across many different HTML files 105
as long as you all link to the same CSS file. In this order of our cascade, 106
first, we check if there are any styles relevant from the external stylesheet, 107
then we check whether if there are any from the internal stylesheet, and finally if there are any inline 108
styles. 109
So then going down the cascade, this is the order where the CSS will get applied. 110
If you had the same thing, 111
so targeting the h1, setting its color here, here and here, 112
if they all target the same element and they're all trying to change the same property, say the text 113
color, then this is going to be the one that will be shown on screen after you cascade through the 114
different levels. 115
The final thing, which is a keyword that you can apply to any CSS rule, is the "important" keyword. 116
So you could have a color property set and we know how we set it normally by simply adding a value after 117
the property, 118
but if you add a space and then you add this keyword, exclamation mark and then the important word (!important), 119
then this is going to ensure that this is going to be the most important rule relative to that element. 120
It doesn't matter how important this previous rule is, it could have been inline or it could have been 121
in an ID selector, or it could have been at the very bottom of the page, 122
this rule is going to come out as the Top Trump. If you haven't already, I recommend taking notes of 123
this page because you can actually use this as a very handy way of working out why your CSS is not working 124
or when you're trying to do something specific and you're trying to make sure that a CSS rule gets applied. 125
You can work your way from the top of the cascade all the way down. 126
And there is, obviously the higher level, which is the categories, position, specificity, type and 127
importance. 128
And then within each cascade you can imagine there's almost a mini-cascade level where you determine 129
which one is most important. 130
Now we're going to try out some quizzes to enforce these rules, and I recommend taking a photo of this 131
page and having it side by side while you do the quiz, because remember, we're programmers. 132
We're not here to memorize things. 133
You can always look at this page when needed. 134
This is the first quiz, 135
here we have a h1 element, and it's got a class as well as an ID, and there are two different 136
CSS rules and you can assume that they are both on an external style sheet, 137
so our style.css. 138
Now I want you to pick what will be the final color of this h1? 139
Will it be blue or will it be green? 140
And once you've made your selection, go ahead and use your QR code reader to scan the QR code that 141
corresponds to your answer, blue or green, 142
and then you will see a gif to tell you whether you got it right or wrong. 143
So you have 30s starting now. (Background music) 144
All right. 145
So did you get it right? 146
So in this case, we have a specificity battle because this is a class selector and this is an ID selector. 147
When we're looking at the specificity, the most specific always wins. 148
So in this case, the ID will trump the class. 149
And that's why if this code was run, which you can test out yourself, the color of the text will be 150
green. 151
So this was the correct answer. 152
Did you get that right? 153
If not, don't worry. 154
We've got more questions coming up. 155
This is our next quiz question. 156
Again, we've got an h1 element, but notice this time it's got two classes applied "a-class" and "another- 157
class." 158
You can apply multiple classes to the same element as long as you add a space in between them. 159
Now, your job is to determine what is the final color of this h1. 160
Is it going to be blue or is it going to be green? 161
You have 30s starting now. (Background music) 162
In this case, what's relevant is the position of CSS rule, because notice that they both have the 163
same specificity. 164
This is a class selector, and this is also a class selector, 165
and they both select the same element, right here. And we're assuming that they're in the same file, 166
so no difference in terms of external, internal or inline. 167
So then the only thing that matters is the order where they appear in the file. 168
So remember that the cascade goes from the top to the bottom and the ones at the bottom will be the 169
ones that replace the ones at the top. 170
So in this case, the final color of the h1 will be blue. When all other things are equal, for example, 171
Specificity, Type and Importance, 172
then we look at a specific category and see which one comes out trumps. 173
Here's the final quiz question for today. 174
Here we have an HTML file and I want you to figure out what will be the final color of the h1. 175
Will it be blue or will it be green? 176
You have 30s clock starts now. (Background music) 177
All right. 178
So in this case, what we've got is an ID called "an-id", and we have an inline style being applied. 179
So remember, in terms of specificity, ID selectors are the most important. 180
However, the CSS specificity as a category is not as important as the type of CSS being applied. 181
This is going to be higher in terms of importance than this. 182
Our final color for our h1 will in fact be blue. 183
Remember that the cascade goes from here to here to here to here. 184
Even if something that has won out on specificity, it can also lose because of the type. 185
So you have to keep in mind the order of importance of the big categories, but also the order of importance 186
of the small categories. 187
So now it's time to try an exercise and write the code yourself so that we really solidify this knowledge 188
in our minds and really get to grips with it. 189
Go ahead and download the zipped starting code for the exercise from this lesson. 190
Once you've extracted and opened it up inside VS Code, I want you to go inside the index.html and look 191
at the starting code that we've created here. 192
The goal is to not change any of the HTML, but actually write your code inside the style.css. 193
And what we're trying to achieve is to turn this into this. 194
And notice I've given you some little bits of hint, 195
for example, the fact that every box has 10px of padding on all four sides. 196
And also notice that in the CSS code there's already some existing code that basically just gets rid 197
of some of the defaults and sets you up for the rest of the challenge. 198
So don't change any of the existing code, either the CSS or the HTML. 199
Look at the goal image, see what it's got, and you're going to need to write some code to change a 200
number of things. 201
So the first thing is these pieces of text should be white, 202
as you can see here. It might be a little bit too difficult in terms of the contrast, but these should 203
be white. 204
And then notice how this text is actually inside a div that should be red. 205
And similarly, down here, the final thing is that there should be a div that encloses everything and 206
it should be colored purple. 207
And notice that there is 10px of padding here, 208
there is 10px of padding here, and there's 10px of padding here. 209
There's a number of things that you have to do using CSS and using what you've learned about the CSS 210
cascade in order to achieve this. 211
And the reason why the cascade is really important is because you can't add any additional classes. 212
You can't change any of the HTML. 213
So you're going to have to use everything that you've got access to in order to achieve this outcome. 214
This is a tricky challenge, and I want you to spend some time thinking about it and thinking about 215
what you've learned, and referring back to maybe the previous parts of the video and revising what you've 216
learned in this lesson. 217
Pause the video now and complete this challenge. 218
All right. 219
I'm going to go through the solution so that you can check your work and make sure that you understand 220
everything that's going on. 221
So I'm going to pull up the goal image. 222
So have it side by side with the current preview of the index.html. 223
That way I can compare to see I've reached the goal or not. 224
Now the first thing I need to do is change this text to white, which is the easiest because notice 225
that these are in a particular class, whereas these don't have any class applied. 226
So the class is "white-text", so I can go ahead and do that right here. 227
Use a class selector, choose the class I want "white-text," and then go ahead and set the color of the 228
text to white. 229
There we go. 230
So that's the first part. 231
So I'm getting closer to the final outcome. 232
Now, 233
the next thing I need to do is to make this box red. 234
So this box is the box that encloses the white text. 235
So it's this particular div and notice that it's got two classes applied to it, "box" and "inner-box." 236
So this "inner-box" isn't actually present as a class on any of the rest of the divs, 237
so I can select that quite easily. 238
Up here next to my other box, I'm going to select the "inner-box" class and I'm going to set 239
background-color to red. 240
Now if we look inside our preview, you can see we're getting pretty close. 241
Now, the next difference is this final outside box, which I want to be purple. 242
This is the div that encloses everything, which is this one that has an ID of "outer-box." 243
This is really the only thing that differentiates this div from any of the other divs 'cause they all 244
share the class of "box." 245
This red div has a class of "box." 246
This blue div has the class of "box" and this outer div also has that same class, which is why we're 247
able to apply the 10px of padding to all three simply using the original code of box. 248
If I want to target this outer box, then I have to use the thing that's unique to it, which is the 249
ID. 250
So now I'm going to select the ID called outer-box and I'm going to set its background color to purple. 251
And now you can see I have achieved the final goal outcome. 252
The important thing here to realize is firstly, we don't need to add any padding to the inner box or 253
the outer box because all three of those divs share a class called box and that 10px of padding 254
is already applied there. 255
Notice if I go ahead and go in here and set the padding, it doesn't change anything because it's already 256
got 10px of padding, 257
but because the ID selector is more specific, if I say change the padding to 50px, then it would 258
actually be the one that will come out trumps. 259
The second thing that I wanted you to realize is that the ID selector is more specific than the class 260
selector. 261
So even though for all three divs, I've set the background-color to blue, because this selects an ID, 262
this will override it. 263
Now the other thing you had to realize is in order to set the "inner-box" background-color to red, this 264
rule actually has to be below this rule because watch as I move it up. 265
Now, in this case, we don't have a red box anymore because these two have the same specificity. 266
They're both selecting a class here. 267
We're setting it to red. 268
But later on we set all the divs with a "box" class to blue. 269
So this refers to the position of our CSS rule. 270
Hopefully, this will have given you some practical experience with the CSS cascade and reinforce some of the 271
lessons that we learned earlier. 272
In the next lesson, we're going to learn how to combine different selectors so that we narrow down 273
on a particular element that we want to select on-screen rather than simply broad stroke, setting the 274
CSS of everything. For all of that and more, 275
I'll see you on the next lesson.