Understanding cascading order - CSS Tutorial

- [Instructor] When I first started working with CSS, one of the hardest concepts I struggled with was the cascade. It made sense in theory but then I'd find myself struggling to get my code to do what I wanted. In this lesson, I'd like to demystify the cascade. So the CSS specification defines the cascade like this. The cascade takes an unordered list of declared values for a given property on a given element. It sorts them by their declarations precedence and then outputs a single cascaded value. There's a lot there, so let's unpack that. We know that we can assign values to CSS properties and then target the element that it applies to. So that's the first part of the definition. So in this example, we've got multiple declared values for CSS properties that all apply to the site title. The next part of that definition is that it sorts this list of styles by the declaration's precedence. We'll talk shortly about what all goes into that but just make a mental note here that if any of these selectors existed in isolation, the resulting output would be different for each. The final part of that definition is that it outputs a single cascade value. Essentially, it weighs the options and determines how to combine those. How does it do that? Well, the cascade is actually an algorithm. It factors in the various parts of a declaration and assigns each one a weight. The algorithm continues to cascade down until it finds a winner. Here are the things that the cascade algorithm checks, listed in order from highest weight to least weight. We've got origin and importance, specificity, the order of appearance, and inheritance. The highest weighted attribute that the cascade checks is a combination of the origin and importance of a rule. Origins can be either the user agent styles, any browser overrides set by an individual user, and then the CSS that you, as the developer, bring to the party. The importance of a CSS declaration is determined by the aptly named important syntax. Adding important to a CSS rule automatically jumps it to the front of the cascade algorithm. The next part of the algorithm involves specificity. This is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. For instance, here I've got the H1 element selector saying that any H1s should be orange. But then I've got a class selector called entry header and it's applied to that H1 and it says that the color should be blue. Well, what wins? In this case, the blue wins. That's because a class selector is more specific than an element selector. Now, source order refers to where the style rule is coming from, whether that's from a user agent styles, an external style sheet, et cetera. But it can even refer to the order that rules are written within a single style sheet. For example, here are two rules that could apply to the H1 element. The H1 ends up being colored orange because both rules have an identical element selector and therefore carry the same specificity, but the last one in the source order wins. The next concept is inheritance. Some CSS property values set on parent elements are inherited by their child elements. For example, font color or font family can be set on parent elements and then inherited by child elements. In this case, we're saying that we're going to set all text in the document to black, and then that's going to be inherited through all child elements unless a more specific rule pops up. And in this case, we have set spans to the color orange. Now, child elements don't always inherit properties from the parent. For example, if we set a width of 50% on a parent element, we wouldn't want all descendants to be 50% of that width. We'd get incrementally smaller and smaller. So in a nutshell, that's how origins and importance, specificity, source order, and inheritance work together to control how CSS is applied to HTML. And that my friend is the cascade.