- Universal Selector
- !Important or Not?
- Multiple Classes
- Mysteries Revealed
!Important or Not?
!important has been around since CSS1. Contrary to common programming syntax, it doesn't mean not important.
!important is meant to provide a balance of power between author and user styles. Author style sheets are those styles designated by the designer or developer. User style sheets are those styles authored by a user and applied via the browser.
User styles are important for accessibility purposes. A user with a vision problem can apply a style sheet via the browser that forces larger fonts and high contrast for more comfortable reading. !important ensures the user style will trump the author style.
So, if we have an author style sheet:
h1 {color: red;}
and a user style sheet:
h1 {color: blue; !important}
applied to the same document, the user style trumps the author style (see Figure 3).
Figure 3 The h1 element is blue due to the !important rule within the user's style sheet.
That the user style will override the author style is true even if there's an !important in an author's rule. If the author style sheet were the following, the user's !important style will still dominate:
h1 {color: red; !important}
NOTE
Here's a bit of historic curiosity. In CSS1, author !important rules took precedence over user !important rules. In CSS 2.x, it's the opposite.
Another oddity: !important is a unique syntactic construct in CSS. The specification refers to !important as being two unique keywords: ! and important. An !important declaration is any declaration with the ! and important keywords included, and an !important rule is any complete CSS rule with the ! and important keywords included within it.
Finally, IE misinterprets the !important keywords, but somehow you knew that was coming!