CSS - Understanding the Cascade

Once you understand the basics of CSS selectors and style rules, the remaining concept that you need to understand is the Cascade. CSS stands for Cascading Style Sheets so it is important to understand what is meant by Cascading or the cascade.

Proximity Is Important

Proximity is one factor that affects the precedence of style rules, the closer a rule is physically to the markup it is selecting the more precedence it has.

Consider this simple markup: <p>I'm a cool parapgraph</p>

Suppose in your CSS files you have this:

p {
	color:black;
}

p {
	color: blue;
}

these are 2 different rules for paragraphs, the first one says the text should be black, the second one says it should be blue, which one wins?

The answer is the second one. The reason is because it is lower in the file and therefore it is closer to the location of the <p> in the markup. So the general rule of the cascade is that style rules closer physically to the element they apply to take precedence over rules farther away (ie higher up towards the top of the css).

Taken to a more clear example consider this markup:

<p style="color:red;">This is a cool paragraph</p>

The style rule attached directly to the element is as close as possible to the element, much closer than anything in the CSS file so this paragraph will have red font even though there is a rule in the CSS that says paragraphs should be blue. But in general we don't want to add style rules right on the element like this example, it is a better practice to keep all of the styles in the CSS files. So we want to avoid adding inline style this way.

Now suppose you are trying to style a page that has that kind of inline hard coded style right on the element and you can't control it, there is a way to make the style rule in your CSS file more important than the inline style even though the inline style is closest to the element. Suppose I really want that paragraph to be blue even though it has red specified in the inline style right on the element, you can do it like this:

p { color:blue !important; }

marking the rule as important will trump the inline style, so in a pinch you can do that, but only use the !important when you really need it.

So the above examples show that proximity to the element based on the position of the rule within the actual CSS file affects the precedence of style rules, things closer to the bottom win.

Specificity Is Also Important to Precedence

Specificity of the selector also affects the precendence of style rules. That is a more specific selector will generally have more precendence than a less specific selector.

Consider the following markup:

<p class="myclass">My cool paragraph</p>

Suppose in your CSS you have this:

p { color:black; padding:5px; }

The font is going to be black based on the rule that says all paragraphs are black. But if I make a more specific selector like this:

p.myclass { color:blue; }

then my paragraph is going to be blue.

Note that it is a good idea to put your more specific selectors lower in the CSS file than the more general ones so that you are overriding more general rules with more specific ones. That is even though a more specific rule may win, it is better not to have proximity working against specificity but instead work with it.

For example my paragraph is still going to get the padding from the first rule but the color will be applied form the second rule. If I want different padding then I need to also override that in my more specific rule.

It is a good idea to experiment with proximity and specificity in your CSS and see what really happens in the browser and which rules win. After a while it will become second nature to you.

In mojoPortal it is important also to understand that all the CSS files listed in the style.config file are combined together and minified for best performance. So, not only is it important how close to the bottom of a specific CSS file that you put a rule but also which file you put it in is important since files are combined in the order in which they are listed in style.config, the files towards the bottom have more precedence than the ones towards the top.

Created 2012-03-13 by Joe Audette