Putting it all together

Woo hoo! It’s time for an example. Say you want to know the color property for this <h1> element:

<h1 class="blueberry">Blueberry Bliss Elixir</h1>

Let’s take this through all the cascade steps:

Step one:

Gather all your style sheets together.

Step two:

Find all the declarations that match.

Step three:

Now take all your matches, and sort them by author, reader, browser.

Step four:

Now sort the declarations by how specific they are. To do that we need to first calculate each specificity score, and then reorder the rules.

Step five:

Finally, sort any conflicting rules in the order that they appear in their individual style sheets.