Skip to main content

A Beginner's Guide to CSS | Part Four - The CSS Order of Precedence

Submitted by helen on Thursday, April 8, 2010 - 22:03; Modified on Thursday, August 18, 2016 - 11:09

Welcome to Part Four of A Beginner's Guide to CSS - The CSS Order of Precedence. Before we delve too far into the fabulous world of CSS, I feel I should explain the order in which CSS styles are applied. This is important and will cause you frustration if you don't know it. But thankfully, it's easy to learn!

The order of precedence for the various types of styles

As you'll know from Part One (or you may know already, even if you haven't read Part One), there are three places where we can put CSS:

CSS cascades — that is, certain CSS declarations naturally override other declarations. The order of precedence for the three types of style are as follows:

  1. Inline styles
  2. Embedded styles
  3. External styles
  • Inline styles take priority over embedded styles and external styles.
  • Embedded styles take priority only over external styles.
  • External styles don't take priority over inline styles or embedded styles, but they can do, if we use a certain special declaration, as we shall see below.

So, to summarise, if you have a class in an external stylesheet, and use that same class name in an embedded style, the embedded style will take precedence; if you apply a class to an element, then attach an inline style to that element, the inline style will take precedence.

It's also useful to note that external stylesheets placed underneath each other also cascade — that is, the styles in the lowest stylesheet override those in the higher stylesheets.

The order of precedence for the various CSS selectors

From Part Two, you learnt that CSS uses selectors to target specific elements to be styled. If you are unclear about the function of the selectors, please visit A Beginner's Guide to CSS | Part Two - The CSS Selectors.

Different selectors naturally override others. Here is the order in which this takes place, from heaviest to least heaviest:

  • The ID selector overrides all the selectors
  • The attribute selector overrides the class selector, the child selector, the adjacent sibling selector, the descendant selector and the type selector
  • The class selector overrides the child selector, the adjacent sibling selector, the descendant selector and the type selector
  • The adjacent sibling selector overrides the descendant selector and the type selector
  • The descendant selector overrides the type selector

The order in which declarations are applied

We briefly touched on this in the last instalment, but I'd like to go over it more thoroughly.

CSS styles are applied in a descending fashion. This means that declarations in the rule that comes last take precedence (taking into consideration whichever selectors you're using and whether your styles are inline, embedded or external).

For example, if you're placing two rules on one element, using the class selector, and both rules are in the same stylesheet, the rule that is farthest down will override the rule that is higher up; it doesn't matter the order you apply the rules to your element, within its class attribute.

If, however, one rule is in an external stylesheet and the other is in an embedded style, the rule within the embedded style will take precedence.

How to override styles

When overriding styles, think logically about how you are using them. It could be as easy as switching the order of your rules, moving embedded styles into a stylesheet, or inserting extra declarations for inline styles. However, if neither of these solutions are possible, there is still a way to ensure that the styles you want to take precedence are considered more important (that's a hint).

There is a declaration called !important which can be used to override any other style, from anywhere — even if the other style is applied using the ID selector, or as an inline style.

How to use !important

!important is applied to the end of a CSS declaration, before the semicolon and it is not case sensitive, so you could write it as !Important or even !IIMPORTANT, if you really wanted to.

CSS Code:


div {
  border:4px solid #2fc1ae !important;   
}

.notification {
  border:1px dotted #bf2fc1;
}

(X)HTML Code:


<div class="notification">A simple notification.</div>

Result:

A simple notification.

This class will override any other styles applied to the same element.

In the above example, the !important declaration will ensure that our div always has a teal border, despite the fact that the notification class being applied has a magenta border.

And that's it for Part Four. Hopefully this hasn't been too complicated to grasp (if it has, drop me a line and I will try to clear things up for you).

Revision Notes

May 29th 2013

Rewrote this tutorial so it's easier to understand.