Skip to main content

!important Declarations

By Adam Roberts

HTML & CSS

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

During the importance and origin calculation in step two of the cascade resolution process, the !important statement can be used to add weight to a declaration. A declaration appended with the ! operator followed immediately by the keyword important, is said to be an important declaration, rather than a normal declaration. An important declaration in an author style sheet has more weight than a normal declaration in an author style sheet, but an important declaration in a user style sheet will trump them both.

In CSS1, important declarations in an author style sheet had greater weight than important declarations in a user style sheet. In order to improve the accessibility of documents that use CSS for presentation, CSS2 reversed the ranking and gave important declarations in user style sheets the highest weight. This facility allows users with special needs to specify desired settings like a larger font size, and to be confident that those settings will be applied.

Here’s an example of an important declaration—in this case, a font-size declaration:

p {
  font-size: 1em !important;
}

If important declarations have the same origin, the normal rules of specificity and order specified apply. If !important is used on a declaration with a shorthand property, it’s equivalent to adding !important to all of the individual subproperties.

Placement of !important

Make sure the !important statement is placed at the end of the declaration, just before the semicolon, and after the value. It will be invalid if it’s located anywhere else. Note also that when a shorthand property is used, the statement must still appear at the end of the list of values for that property, not against each individual value. Here’s an example:

.example {
  margin: 10px 12px 9px 8px !important;
}

The above rule would make all the margin values (top, right, bottom, and left margins) for elements within a class of “example” !important.

!important and Maintenance

Introducing even one uncommented important declaration into an author style sheet has a huge negative impact on the style sheet’s maintainability, so it should be used with care. The only way to overwrite an important declaration is by using even more important declarations—an approach that soon becomes unmanageable. A style sheet that’s littered with important declarations often signals that an author hasn’t thought clearly enough about the structure of the CSS.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!