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>
</div>
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;
width:800px;
}
width:800px;
}
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
}
Comments
Post a Comment
Thanks for your valuable comments.