Tuesday, May 27, 2008

Importance of !important in CSS

Do you know What does !important mean in CSS?, an "!important" declaration (the keywords "!" and "important" follow the declaration) this takes high precedence over a normal declaration. And can be framed in this way, this means that the styles are applied in order as they are read by the browser.

CSS it tries to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet. But in CSS1, this is in other way round - Author "!important" rules took precedence over User "!important" rules.

For Example:
User's Style Sheet:
    1: <style> 
    2:   p{font-size: 2em !important;} 
    3:   p{font-style: italic;} 
    4: </style>

Author's Style Sheet:
    1: <style> 
    2:   p{font-size: 3em;} 
    3:   p{font-style: normal;} 
    4: </style> 

If you see in the above instance, the first rule in the User's Style Sheet has "!important" declaration, which will overrides the first rule in the Author's Style Sheet. And if you observe for the second rule in User's Style Sheet it does not contain "!important" so this will be ruled out because here second rule in the Author's Style Sheet has got high preference so the HTML will render by taking size as "p{font-style: normal;}"

If you would like to know more on this, then check with the w3 site:
w3.org and move to the section called "6.4.2 !important rules"

No comments: