In a Nutshell: How the Cascade Works

While it's still fresh, I want to go over the cascade concept we talked about in the last post. Starting from the HTML element we are interested in and working our way backwards, we first look at any inline styles. That is, styles that are specified using the "style=" attribute of the element. Inline styles always win. Inline styles have more weight than anything else since the style is directly attached to the element. Embedded styles, which are styles defined within the same HTML document win over externally linked styles when the specificity is the same.

This is where the "cascade" comes into the picture. The cascade is how the browser figures out which style to choose from a collection of styles coming in from different sources.

In general, the browser collects all the styles together coming from the programmer, reader and browser's default style sheets, looks for all the selectors that match, sorts them into groups by programmer-reader-browser with programmer styles being most important. Then it re-sorts them within each of those groups by specificity (if it's an inline style it will always have a higher specifity than any other styles). If specificity is the same, then it sorts by the order the rules are found in the style sheets; rules defined later (in other words, rules that comes last) win over earlier rules of the same specificity.

For rules coming from the same style sheet, the cascade is still at work looking for the more specific selector to give it the last say. However as seen in our example, if the rule that wins the battle does not address all the previously set property values then you will keep the values set by less specific selectors.

Here are a couple of examples to consider:

h2 {
    color: blue;
    font-size: 10px;
}

h2 {
   font-size: 20px;
}

<h2 class="hello">Hello There</h2>

In this case the font size of 20px wins only because it comes later in the style sheet. But that same rule does not specify the color, so the color will still be blue. If we introduce another rule to have a more sepecific selector, like this:

h2 {
    color: blue;
    font-size: 10px;
}

h2.hello {
   font-size: 30px;
}

h2 {
   font-size: 20px;
}

<h2 class="hello">Hello There</h2>

Then the font size will be 30px since the new rule has a higher specificity than the other two. But again, since it does not change the color property, the heading text will be blue.

This is a simple example of the Cascade at work, in this case cascading the color: blue setting from the first rule.

Just in case you are wondering how you figure out specifity, here's a foolproof quick way to compute it: Think of a 3 digit number holder. If the selector has any ID's, add one for each to the first slot. If the selector has classes, add one point for each to the middle slot and if the selector has element names, add a point to the last slot for each element.

"span.greypen" s specifity is 011 because it has 1 element and 1 class.

If you were to rewrite it as ".bargraph ul.bars li span.greypen", then its specifity goes up to 033. It has three classes, bargraph, bars and greypen and three elements, ul, li and span.