Home | About Chris Hope | Contact Chris Hope | Search:

Using !important with CSS

Posted January 31st, 2009 in HTML and CSS

The CSS !important declaration is something I've seen in CSS code before but never knew what it meant until a few days ago, so I thought I'd write a post looking at !important to show what it does.

CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.

The easiest way to explain this is with some examples.

Example #1: Normal behaviour

Let's say we declared paragraph tags in the #example div to be colored blue, and then further down the style sheet (or in another style sheet also linked to in the page) that they be colored red:

#example p {
    color: blue;
}
...
#example p {
    color: red;
}

The later rule overrides the earlier rule, and paragraphs within #example will be red.

Example #2: Using !important

If we assigned !importand to the first rule, then the second rule would be ignored because the first rule now has precedence:

#example p {
    color: blue !important;
}
...
#example p {
    color: red;
}

The first rule now has precedence so the later rule is ignored and the paragraph will be blue.

Example #3: !important declared again

If the !imporant declaration is used again in the later definition, then the normal cascading rules will apply, and the style assigned will be the latest !important one:

#example p {
    color: blue !important;
}
...
#example p {
    color: red !important;
}

In the above example the paragraph will be red.

Example #4: Inline styles

Ideally you shouldn't use inline styles, but here's a couple of examples when using them with !important.

!important in the CSS style sheet will override any inline styles as well:

CSS: #example p {
    color: blue !important;
}

HTML: <div id="example">
  <p style="color:green;">This paragraph has an inline style</p>
</div>

In the above example, the paragraph will be in blue text and not green as in the inline style because of the !important declaration in the CSS.

Example #5: Inline styles with !important

However, if you add !important to the inline style then that will of course have precedence:

CSS: #example p {
    color: blue !important;
}

HTML: <div id="example">
  <p style="color:green !important;">This paragraph has an inline style</p>
</div>

So in the above example the paragraph will be green.

Some notes about Internet Explorer

Naturally this works in all currently used browsers with exceptions for Internet Explorer - but then would you expect any different?

Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations. So in Example #1 above, the other browsers would display the paragraph in blue but IE6 would display it in red.

The situation was fixed in IE7, but if it's in quirks mode, or you don't specify a doctype at all, then IE7 will revert to the same behaviour as IE6 and use the last declaration.

Internet Explorer 8, on the other hand, seems to always support !important declarations no matter what I did to try to make it act quirky.