Saturday, 4 February 2012

!important Statement in CSS

As the name indicates it’s an important statement in CSS. From interview point of view too it’s commonly asked question even from the back end programmers. If you will search in google about the !important statement you will find a list of pages. I am writing about it to include everything possible under this topic and to keep it in my mind for times.

What is !important Statement?

The !important statement is actually a keyword you can use at the end of CSS property. It would give more importance to that statement. For example :

p {margin-left: 10px !important}

How it works?

Normally what happened, when you have two statements with same property and different values then as per the CSS rules, recent one would be used. For example :

p{margin-left : 10px}
p{margin-left : 20px}

in this case 2nd one would be used.

But when you use !important statement as following :

p {margin-left: 10px !important}
p{margin-left : 20px}

then the first one will get the importance and will be used.
Rules :

1) If a rule(CSS statement block) between an author(browser) and a user stylesheet conflicts, the user's rules will get applied over author's rules.

2) When 2 or more important statements that apply to the same element have same properties then the normal cascading rules will apply or the statement with the most specific selector will get applied.  For ex:

#example p {
    color: blue !important;

#example p {
    color: red !important;

Here as the statements are same except value, so latest one will be used.

div #leftSide {
            background-color: #00f !important;

#leftSide {
            background-color: #0f0 !important;

#header #leftSide {
            background-color: #f00;

In this style example, the first background-color value will take precedence because of two factors: First, it uses the!important declaration; and second, it is more selector-specific.

If you add !important statement to the inline style then that will of course have precedence: 

CSS: #example p {
    color: blue !important;

<div id="example">
  <p style="color:green !important;">This paragraph has an inline style</p>

the paragraph will be in green text and not blue.

Why it’s important?

1) Actually the statement was evolved for IE6 and previous versions. In all other browsers if you will use !important keyword with css statement then that particular statement would be used but it won’t work in IE6 and previous versions.

For example

#main {
width:auto !important;

In this case for browsers like firefox, safari, Opera, chrome and IE7 and latest versions first statement would work while for IE6 and previous versions 2nd statement would work.

The situation was fixed in IE7, but if it's in quirks mode, or you don't specify a doctype at all, then IE7 will revert to the same behaviour as IE6 and use the last declaration.
Internet Explorer 8, on the other hand, seems to always support !important declarations no matter what I did to try to make it act quirky.

2) It is also used to override inline styles. So with only one extra stylesheet and without changing any code in the html and it’s css you could change the whole appearance of the html.

Drawbacks : We all knew that each and everything have it’s own drawbacks if not used properly. Here is the following drawback of !important statement.

1) If !important statement is used without care then it could encourage sloopy and less maintainable code.

Conclusion :

Don’t use too much !important statements. Only use it where it’s required by keeping in mind it’s drawbacks.  If it’s used properly then it could save a lot of time and effort.
Some more important points :
#header {
            padding: 20px 10px 20px 10px !important;

Is equivalent to

#header {
            padding-left: 10; !important
            padding-right: 10; !important
            padding-top: 20; !important
            padding-bottom: 20; !important

No comments:

Post a Comment

Thanks for your valuable comments.