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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s