Understanding the Cascade

[00:00:00]
>> The next concept I'd like to move on to is talking about the Cascade. And you're gonna find some of this information to be a little bit surprising and a little bit unpredictable, that's why we talked about inheritance and specificity first. Inheritance and specificity are subsets parts of the Cascade parts of figuring out how we are going to assign specific styles to a given selector within our document.

[00:00:26]
And the interplay between these and the Cascade is more in depth than you would expect in terms of just what is the order that things are being presented. So let's get into that a little bit. If you look up the cascade on MDN, they are going to describe it in the following way.

[00:00:45]
So we'll go through this in a little bit of detail and then I'll shorten it up for you so it's a little easier to remember. So first of all, the very first thing that you wanna do is go through and identify all of the possible styles that will apply to whatever it is that you're analyzing.

[00:01:03]
You need to look in media queries, you need to look in at supports statements those are the ones that will if it supports a given. Structure and CSS then execute these styles, you need to look at those you need to look at something called layers. Layers are brand new in CSS, I'm going to talk about them extensively here in a moment but you may have layers inside of your CSS, and we need to take a look inside of those for styles as well.

[00:01:31]
Then what we're going to do is identify the origins of all the styles that apply to that particular selection, we have to look at their levels of importance and we need to order them accordingly. So that would include things like where are our browser style sheets, usually on our world that's browser style sheets but it could be user agents we wanna take a look at user style sheets remember again.

[00:01:54]
We may have some users that want to assign their own style sheets to webpages to help them make them more readable. We have author style sheets, those come from multiple places. External style sheets, those are the separate documents we typically work with in web development. We may also have styles that appear in the head of the document, those are extra sorry.

[00:02:16]
Those are embedded or their internal documents and then we also have inline Styles as well and we'll take a look at all of those. Then we need to sort those styles again and to clear who wins based on specificity or remember inherited plays into that as well. And then finally, if the styles are of equal specificity, then the one that comes later wins.

[00:02:41]
So usually, when we think of the cascade, we only think of that last one. [LAUGH], the one that comes later wins, as you can see, there's actually a whole lot more that comes before that. And again, this leads to some of those bugs that you're trying to debug, and you cannot understand why it doesn't work