Which CSS and When – Understanding how styles are applied

Once you get beyond the basics of CSS, it can seem a bit intimidating. Cascade and specificity seem like obscure concepts if all you want it to do is get a design working.

But, learning how browsers apply stylesheet rules is an important tool, once you understand how the rules are applied, you can manipulate styles much more powerfully.

In this tutorial we’ll look at the various ways that web browsers choose to apply stylesheets, and look at some of the tricks you can use to take advantage of the way CSS works.

Quick Refresher

Before we start it’s worth noting that this tutorial assumes you know the basics of how styles are applied. Particularly it’s important you understand CSS Selectors, you know that:

#content h2{ font-size: 0.8em;}

Means apply a font size of 0.8em to any h2 that is inside the page element with the unique id of content. Typically content might be a div, but it could be any type of HTML element.

And you’re also aware that:

.highlight strong {color:red;}

Any strong element inside another element with the class highlight applied to it.

The Process

This tutorial is about understanding methods that browsers use when applying your styles to a web page. It takes you step by step through the process, so you’ll be better able to diagnose why a particular style isn’t sticking.

This working out of which rule applies is called cascade, and is the cascading part of CSS.