By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The CSS Important rule

About the Important rule of CSS, and when it makes sense to use it, with example.

Edited: 2011-04-20 18:10

The !important rule of CSS is used to give CSS declarations precedence over normal declarations. The !important rule can be used by users, to overwrite a web designers declarations.

It can also be used by web designers, to overwrite their own styles. There are times where a given rule in their stylesheet, has taken precedence over other rules. In which case they could either use the !Important rule, or apply a class or ID and use that instead.

User !important rules will have precedence over the web designers !important rules.

For users

Users can use the !Important rule if they find a website hard to view. I.e. Color blind users. The question is if they will do it. Most users likely don't understand CSS that well, (if at all), and likely ain't aware of the possibility.

It may be better to provide Multiple color schemes for a website, but this can sadly be a tedious task.

Users can add their own default styles, to a stylesheet, and then load it up in their browser. Some browsers allow this directly from the settings menu. If you are a user who wish to add your own StyleSheet to your browser, you should read the article: Using custom StyleSheets with your browser.

For web designers

You may have tried it already, when you try to keep things as clean as possible, you often end up with overlapping styles at some point. An easy fix to this problem, is to use the !important rule.


In the below example, we first select all img elements inside a elements, then we try to overwrite that selection with the !important rule, using a less specific selector that targets all img elements.

  /* Normal declaration */
a img {border:3px solid #000000;}

  /* With !Important */
img {border:3px solid #000000 !important;}

The last declaration will take precedence over the first in this example, despite being less specific about which elements to apply the style to.

This is not normally possible, the more specific a selection is, the higher precedence it will have. The !important rule takes the highest precedence, regardless of how specific the declaration itself is.