The importance of the !important CSS declaration
Share & bookmark 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?
Advert: Accessible CMS
Webcredible's accessible web content management system (CMS) is now available.
If you're looking for an easy-to-use CMS that forces content editors to create web pages highly accessible and optimised for search engines, then our accessible CMS could be the perfect product for you!
Take a tour and find out more about our accessible CMS.
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.
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.
What next?
- Read more web development articles on this website
- Get a highly accessible CSS website through our accessible CSS web design expertise
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend our interactive intermediate CSS training, advanced CSS training and jQuery training courses
