Authors and users have the ability to define any declaration as explicitly more important than any other declaration. When declaring a declaration as !important, the declaration is elevated above the normal rules of the cascade and attains the highest precedence (priority).

The !important Directive

To specify a declaration as !important, simply include the !important directive immediately following the property value:

body { color: green !important; }

There can be white space between the ! and important keyword. Either of the following will work properly:

color: green !important;
color: green ! important;

The Purpose of !important

!important is used to override one declaration with another declaration regardless of the otherwise-established order of precedence. !important is primarily used in a user style sheet to override the rule definitions from an author's style sheet.

Under CSS2, by default the author's style declarations have a higher priority than do declarations made in a user style sheet.

With accessibility in mind, however, it makes sense for a user to be able to override the definitions of a web author/designer. A sight-impaired user may require that the background and foreground colors be specific to their needs, such as white on black for a heavy contrast.

!important allows the user to specify new values which override an author's preferred graphic design scheme for the site.

CSS Version History

Version CSS1

In CSS version 1, user style sheets had priority over author style sheets.

Version CSS2

In CSS version 2 - the current version used by modern browsers - the author's styles have precedence over user-defined styles. The exception occurs when declarations are marked as !important in the user style sheet. When a user marks a declarations as !important, then that rule trumps any author rule and has the highest priority. The user's !important rule wins.

In addition , if an author marks a rule as !important and a user marks the same rule as !important, then the user's declaration wins. This is as it should be, giving users the ability to dictate how content is displayed to meet their needs. Of course the end-user must take the appropriate steps to create their own local style sheet which includes !important directives.

Should the Author use !important?

Many sources recommend that authors should not use !important because of the conflict between CSS1 and CSS2.

  1. IF a user is still using a CSS1 browser...
  2. And if the author is using !important declarations...
  3. Then it is very possible that the author's !important rules are overriding the rules of users who depend upon their settings to be able to view the author's content!
     
    If the user is using a CSS2 compliant browser then there should be no conflict - the user's !important declarations always win.

An Aside for Programmers

For some unknown reason, the W3C decided to use !important to signify something as important.

For those of us who are programmers, we are accustomed to the exclamation point ( ! ) being the NOT operator. So when reading CSS and we see !important... we may momentarily revert back to our programming experience and read this as "NOT important" when in fact the opposite is true!

I still cannot believe that this issue was not addressed as the W3C decided the issue. Would it have been so hard to use "important!" instead? It makes way more sense to me! :-)

References