Cascade Overview

[00:00:00]
>> So if we shorten this up a little bit, it's going to look like this first of all think about the relevance because most of your stylesheet isn't going to apply to the thing you're trying to analyze. Then we want to look at origin and importance. Where's it coming from?

[00:00:14]
Does it have a bank important after it? We want to take a look at the specificity and analyze that, that would be calculating those numbers that's going to help tell us which one is most specific. And then, the last one is the order of appearance that applies when the specificity is equal.

[00:00:33]
Okay, so here's a few little odd wrinkles as we think about this, the cascade algorithm is applied, but for the specificity algorithm. So if we look at early in the process of the cascade, and we have two styles here, the Browser stylesheet, let's say it has root, which of course is a pseudo class h1.

[00:00:56]
And the Author stylesheet says h1 and we have two different styles here for the border, which one of these is going to win? Well, even though the browser stylesheet has a more specific selector, the author style sheet wins because in terms of the Cascade the browser style sheet comes before the author style sheet.

[00:01:21]
At a normal level of importance, so all that probably looks odd to you but it is the way that this will work. So if we ignore layers for the moment and I, We'll be coming back to those, let's look at exactly how this cascade is going to work.

[00:01:40]
So the least important things show up at the top. The most important ones show at the bottom. We start with the styles that come from the user agent or the browser. Those styles that come with your browser are applied first, the user may override those styles with their own stylesheet.

[00:01:59]
And you as the author or the developer will override the user styles. That sounds a little bit odd. But wait until we get to the end. So we as the author will override anything that the user wants. The next thing that happens are, animations in CSS, that have @key frame associated with them.

[00:02:20]
So this is the true kinds of animation, not transitions which are analyzed differently. Why would we be putting our animations here? Is a great question. The reason why is, we don't want the cascade specificity and so forth get in the way of an animation that is executing as things are changing, and then animation is happening.

[00:02:43]
We wanna be sure that, that animation is gonna beat anything else that might be there in the author stylesheet that, that encounters as it moves through space and time. Then we have the Mirror Universe. Okay, so we have all of our regular normal importance ones, the important ones go the opposite order.

[00:03:04]
So, the author styles even though in normal importance, they are almost the most important ones. They are the least important ones. When we start putting bang important on things. The user can override the author styles if they start putting bang important on it. So when you take a look at a user stylesheet for somebody who has visual issues.

[00:03:27]
You will find that it is full of Bang important, because they wanna override things that are coming from the web developers stylesheets, even if they have been important on them already. Notice that close to the bottom here, the most important one is the user agent, the browser with an important style on it.

[00:03:47]
So if that browser stylesheet has a bank important on it, you will find it next to impossible to override it. The only thing that overrides all of those are CSS transitions, you may be familiar with the CSS transition property that does things like rotating things moves in space and so forth.

[00:04:06]
And those are the most important again for the same reason as the animations as we move things through time and space, we wanna be sure that we don't see weird artifacts happening. As the transition or the animation is executed, and so that's why these get higher importance, and cascade.

[00:04:28]
Okay, so in summary then as you look at that great big huge table, here's what you need to remember. The animations have more importance to them than anything with a normal value, whether that's a user, author, or user agent style, animations will beat anything with normal values. Bang important beats the animations.

[00:04:51]
And transitions beat bang important. That's kind of that summary in a nukshell, if you can remember those things you'll probably remember most of the way that, that cascade happens to work.