!important Declarations

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.

Note: 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.

CAUTION: Internet Explorer Support

In Internet Explorer 6 and earlier, if an important declaration appears before a normal declaration for the same property within the same declaration block, the normal declaration will overwrite the important declaration.

Internet Explorer 6 and 7 give importance to a declaration when an illegal identifier is used in place of the keyword important, instead of ignoring the declaration as they should.

In Internet Explorer 8, the importance declaration is ignored if the selector contains a :first-letter or :first-line pseudo-element.

DANGER: !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.

User-contributed notes

Related Products