Explaining the C in CSS

Warning This article was written over six months ago, and may contain outdated information.

After being a developer for a while you sometimes forget that there are a lot of people still learning. With that in mind – and working on the assumption that the more information that’s available, the easier it is to find – I’ve decided to start an occasional series of web development basics tutorials.

One of the things I see a few people struggle with when learning CSS is the concept of the cascade. I admit that as your stylesheets get more and more complicated, so the cascade gains in complexity with it. At it’s core, however, it’s pretty simple. There are three things you need to keep in mind: order, specificity, and inheritance.

Order

In a nutshell: if two declarations are applied to the same element, the values of the declaration which come later in the document flow (which I shall refer to as the ‘most recent’) are applied. Here’s an example:

h1 { color: red; }
h1 { color: blue; }

In this case, the h1 element will be colored blue, because that declaration is the most recent in the stylesheet.

Obviously this will be affected by whether a style is external (or embedded) or inline – inline styles always win because they are more recent than styles in the head. Also, this rule only applies when declarations have an equal specificity; see below for an explanation of this.

Specificity

Declarations can be weighted to change the order. This weighting depends on which selector (or chain of selectors) is used to apply rules to it. Andy Clarke put together a specificity table using Star Wars characters which explains the rules in detail, but at it’s most basic it’s this: id selectors overrule class selectors, which in turn overrule element selectors.

Say for example you have this markup:

<h1 class="title" id="page-title">

And these rules in your stylesheet:

h1 { color: red; }
#page-title { color: green; }
.title { color: blue; }

The colour of the h1 would be green, because even though the class selector is more recent, id selectors have a higher specificity.

Inheritance

You can probably guess this from the title; child elements inherit values from their parents (in most cases). Say for example I have my h1 element in the page again, and the following rule in my stylesheet:

body { color: red; }

My h1 element would display in red also, as it inherits the value from it’s parent – the body. As I mentioned before, that doesn’t happen in every case; links, for example, don’t inherit colours from their parent element. A little trial and error should let you know what is and isn’t inherited.

Summary

Although this has been a very quick run-through and can’t hope to show every facet of the cascade, I hope someone reading this gets some use out of it and it helps them fix some troublesome behaviour!

2 comments on
“Explaining the C in CSS”

  1. Which Doctype do you use?

  2. XHTML Strict if I’m using a CMS, HTML Strict if I’m hand coding.