The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important declaration should be used with caution, it’s a very useful and powerful expression that much deserves its place in our CSS world. This article offers a guide to what the declaration is, what it does and how you should use it

How is it declared?

The !important declaration is a keyword that can be added at the end of any CSS property/value. For example:

p {margin-left: 5px !important}

or

p {margin: 10px 5px 0 10px !important}

What is its impact?

The CSS assigns a weight to each rule depending on the specificity of its selector and its position in the source. This determines which style is applied to an HTML element.

If 2 rules conflict on a single element then the following principles will be applied:

• Origin of rules – If a rule between an author and a user stylesheet conflicts, the user’s rules will win over the author’s rules.
• Specificity – When 2 or more declarations that apply to the same element set the same property and have the same importance and origin, the declaration with the most specific selector will be applied.
• Source order – When 2 rules have the same weight, the last rule declared in the stylesheet will be applied.

There might be times when it would be useful to change the order of sequence. It’s possible to break that cascading chain by using the !important CSS declaration. When the !important declaration is used on a property/value, that value becomes the most important for that property and overrides any others.

In this example, the second selector is more specific and declared last but the first rule will take precedence because the !important declaration overrides any other value that is set for this element.

 p  {margin-left: 5px !important}
#id p {margin-left: 10px} 

If an !important keyword is appended to a shorthand declaration:

 p {margin: 10px 5px 0 10px !important} 

It’s the same as adding it to each property:

 p {
margin-top: 10px !important;
margin-right: 5px !important;
margin-bottom: 0 !important;
margin-left: 10px !important
} 

When should you use !important ?

Here are some examples when the !important declaration can be used:

Targeting IE 5/6

Internet Explorer 5 and 6 ignore the !important declaration if the same property is declared twice in the same block of styles.

p  {margin-left: 5px !important; margin-left:10px}

Internet Explorer 5 and 6 will apply a margin left of 10px to each paragraph while all the other browsers will apply a margin left of 5px.

Overriding inline styles

The !important declaration can be used to override inline styles generated dynamically by WYSIWYG editors in content management systems.

Text formatting defined via a WYSIWYG editor is inserted in the HTML code as inline styles. But those inline styles can be overridden by the !important declaration in the author stylesheet.

For example, a user may want to have a line of text styled in red:

<div id="content"><p style="color:red">Some text</p></div>

But the site’s author can override this declaration by forcing all paragraphs of text within the content area to be styled in black:

#content p {color:black !important}

Print stylesheets

The !important declaration can also be used in a print stylesheets to make sure that the styles will be applied and not overridden by anything else.

What are the downsides?

The only way to override an !important declaration is by using an even more specific !important declaration. This can make the stylesheets quite cluttered and very difficult to maintain.

Good to know

In CSS1, an important declaration in an author stylesheet took precedence over the user’s stylesheet. This order has been reversed in CSS2 to make sure that users can always overwrite an author’s stylesheet if wanted.

Conclusion

The !important declaration if used without much consideration can make CSS files difficult to maintain but if used with forethought, it can save time and effort.