Webmaster tips » CSS

Jan 15, 2010
Brigitte Simard

Using !important CSS Declaration

Average rating:
  • 3.5 out of 5 Stars
Rate this article

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.

Print! Print this article   Bookmark:

About The Author
This article was written by Brigitte Simard a web developer at the user experience consultancy, Webcredible. Brigitte's passionate about improving the accessibility of websites and is responsible for a variety of CSS design projects and accessible CMS implementations.
Rate This Article
How would you rate the quality of this content? Currently rated: 3.5 out of 5 stars. 2 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 3.5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles
Rating: 3 stars
Styling Forms with CSS by WebAssist (Nov 2, 2009)
In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web...
Rating: 4.5 stars
10 CSS Tips from a Professional CSS Front-End Architect by Ryan Parr (Jul 22, 2009)
I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp...
Rating: 5 stars
9 Advantages of using CSS by Grace Alexa (Apr 11, 2008)
CSS style sheets have made it easier to handle web pages during web development. CSS or Cascading Style Sheets as the name suggests is a style sheet that allows you to easily link to other documents in your website...
Rating: 3.2 stars
13 Reasons Why CSS Is Better than Tables by Matt Jurmann (Apr 8, 2008)
For the past few days, we've been scouring the web searching for the top 13 reasons why Cascading Style Sheets (CSS) are superior to tables when designing a website. Some web designers swear that tables are better than CSS, while others believe that tables are ancient history and CSS is the only real solution to coding a web site's layout...
Rating: 5 stars
Planning your CSS - the definitive guide by Brigitte Simard (Mar 3, 2008)
The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice...