Professional Documents
Culture Documents
important CSS Declarations: How and When to Use Them | Smashing Coding
CSS, Essentials
109 Comments
Advertisement
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their
stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
Lets take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.
declarations and exactly how they work, lets give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade
!important
added
!important
!important
added
Apply styling based on specificity, with the more specific selector winning over more general ones
Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one wins)
With that basic outline, you can probably already see how
!important
declarations weigh in, and what role they play in the cascade. Lets look at
!important
in more detail.
declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase !important declaration is a reference to an entire CSS declaration, including property and value, with
!important
added (thanks to Brad Czerniak for pointing out this discrepancy). Here is a simple code example that clearly illustrates how
!important
!important
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of example will have text sized at 14px, due to the addition of
Without the use of
When
If
#example
!important
!important
, the first
font-size
!important
declarations:
!important
!important
!important
is used on a shorthand property, this adds importance to all the sub-properties that the shorthand property represents
!important
The
, there are two reasons why the second declaration block should naturally have more weight than the first: The second block is later in the stylesheet (i.e. its listed second). Also, the second block has more specificity ( #container followed by
!important
instead of just
#example
keyword (or statement) must be placed at the end of the line, immediately before the semicolon, otherwise it will have no effect (although a space before the semicolon wont break it)
!important
If for some particular reason you have to write the same property twice in the same declaration block, then add
!important
to the end of the first one, the first one will have more weight in every browser except IE6 (this works as an IE6-only hack, but doesnt
(like
!important
), the CSS rule will still be given extra weight, while other browsers will ignore it
!hotdog
!important
!important
out of laziness, to avoid proper debugging, or to rush a project to completion, then youre abusing it, and you (or those that
!important
, youre
disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.
If you never use
, then thats a sign that you understand CSS and give proper forethought to your code before writing it.
!important
That being said, the old adage never say never would certainly apply here. So below are some legitimate uses for
!important
declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.
!important
!important
to make text larger, or to color-related rules in order to increase the contrast of web pages.
font-size
In the screen grab below, Smashing Magazines home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefoxs Developer Toolbar:
!important
, because a user-defined stylesheet will override an author stylesheet regardless of specificity. If, however, the text size for body copy was set in the author stylesheet using an
stylesheet could not override the text-size setting, even with a more specific selector. The inclusion of
!important
resolves this problem and keeps the adjustability of text size within the users power, even if the author has abused
!important
!important
The highlighted background style rule has a line through it, indicating that this rule has been overridden by a later rule. In order to reapply this rule, you could find the later rule and disable it. You could alternatively edit the selector to make it more specific, but this
would give the entire declaration block more specificity, which might not be desired.
could be added to a single line to give weight back to the overridden rule, thus allowing you to test or debug a CSS issue without making major changes to your actual stylesheet until you resolve the issue.
!important
!important
added. Youll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:
!important
declarations to your print-only stylesheets to help override specific styles without having to repeat selector
specificity.
FOR UNIQUELY-DESIGNED BLOG POSTS
If youve dabbled in uniquely-designed blog posts (many designers take issue with using art direction for this technique, and rightly so), as showcased on Heart Directed, youll know that such an undertaking requires each separately-designed article to have its own
stylesheet, or else you need to use inline styles. You can give an individual page its own styles using the code presented in this post on the Digging Into WordPress blog.
The use of
could come in handy in such an instance, allowing you to easily override the default styles in order to create a unique experience for a single blog post or page on your site, without having to worry about natural CSS specificity.
!important
Conclusion
declarations are best reserved for special needs and users who want to make web content more accessible by easily overriding default user agent or author stylesheets. So you should do your best to give your CSS proper forethought and avoid using
!important
wherever possible. Even in many of the uses described above, the inclusion of
Nonetheless,
!important
!important
is valid CSS. You might inherit a project wherein the previous developers used it, or you might have to patch something up quickly so it could come in handy. Its certainly beneficial to understand it better and be prepared to use it should the
!important
need arise.
Do you ever use
in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?
!important
Further Resources
!important rules in the CSS2.1 spec
!important Declarations on SitePoints CSS Reference
CSS Specificity And Inheritance on Smashing Magazine
Everything You Need to Know About !important CSS Declarations
What are the implications of using !important in CSS?
It's done. The Smashing Book #4, our brand new book with smart techniques, ideas and approaches for front-end development and design. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Get the book now.
Tags:
CSS
Essentials
Share on Twitter
Back to top
Louis Lazaris
Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end
developers.
Related Articles
Advertising
109 Comments
ZizzelDaZuz
Best Comments
Thank you for that article! My gut feeling always told me to avoid this ;-)
Reply
growdigital
Agree with Louis on this one, though could have a been a shorter article if Louis had simply said:
DONT. EVER.
;)
Reply
DesignHamper
Awesome. How this great idea you get ? I think !important s behavior very from browser to browser.
Reply
Bassem
Reply
DJ
Reply
Jaryl
Reply
Steven Schrab
Reply
Louis
Just to clarify:
IE6 doesnt ignore !important declarations; it ignores an
!important declaration for a property thats repeated in the same
declaration block.
IE6 treats !important exactly the same as every other browser, except for the above.
Reply
James King
Reply
Dave Sellers
10
Yep its definately useful for overriding inline CSS that you dont have any control over.
I also occasionally use it if I am using a class specifically for
changing text colour. For example Ill have .blue, and a .green,
styles. I can add these to things to override any previously set colour.
Makes it easy to change colours across the board at a later date too :)
Reply
James
11
.blue and .green are perfect examples of non-semantic class names that should never be used.
Reply
Olev
12
Reply
Jay Khatri
13
Reply
Tom
14
Reply
Chris Coyier
15
This is one of the reasons I use !important sometimes, within the context of regular design:
http://jsbin.com/erici/edit
Another reason is generic classes that you can use in a pinch and be sure theyll get applied, like:
.last { margin-right: 0 !important; }
Reply
Louis
16
Yes, but the problem with that is those are not the only
solutions to those problems. In both cases, you can still get the same
result by just being specific enough in your CSS.
Admittedly, your way could end up saving dozens of lines of CSS, and
is much easier, but I still cant justify its use even in those
circumstances. I guess its acceptable for a personal blog or
something, though, since its unlikely anyone else will use the
code.
Reply
Chris Your
17
Absolutely. The !important declaration is very helpful when creating generic classes.
I totally disagree with never. If you learn how to
properly use and understand CSS, !important becomes very important.
Especially when using new emerging CSS languages like Compass and Sass
which are based on the idea of creating mixins, variables, nesting, and
most importantly extending CSS. Write less, do more.
I do agree that you shouldnt write !important to be lazy.
Reply
Its Adam
18
Reply
Louis
19
Reply
Zoe
20
Its Adam might be referring to this website, which by my count has 121 occurrences in the default stylesheet alone.
Reply
Louis
21
Reply
Mark
22
Louis
23
Mark
24
Louis
25
Mark,
In my case, the use of !important in the BSA styles would fall under
#2, To temporarily fix an urgent problem. BSA code gets
pulled from two different places, from their server and your own styles.
At the time, it seems that I forgot to reset the styles on the BSA
server, and mine were not taking effect, so I used !important to fix it
as quickly as possible.
Regardless, my site is not as important as client projects, and other
work that brings in more money for me, so I didnt really care
that I had uses of !important that wouldnt effect the rest of my
stylesheet anyhow. And obviously, since I was able to go back and
correct the BSA styles without the use of !important, then that only
demonstrates that the advice in the article stands: In most cases, you
should never use it.
Whats ironic is that I could send you links to 30 or more
projects that Ive written CSS for, and you wont find a
single use of !important in any of them. Send me an email through my
website, and Ill gladly send you those links.
So what exactly is the point of your comments? Are you trying to
justify the use of !important in your own stylesheets? I dont get
what youre trying to prove here? Do you have a better analysis
of !important that we dont know about? Your free to write your
own article. Youll get paid nicely for it, too.
As far as SM, I have no idea who does their coding or why they use
!important so much. SM allows authors to have their own voice, and
arent necessarily bound by the rules and principles stated by
authors anyhow.
Louis
26
BTW, Mark
Dont get me wrong here. I appreciate that you and a few others
reminded me to check my own work. For the record, I admit that my use
of !important in a few instances was not necessary, and seems to only
have been a quick fix for what I consider an important part of my
website.
Thats why I write articles like this, so I can hear
peoples comments, and improve my own view. So I apologize if I
was rude in any way. But I do think it was wrong for you and that other
commmenter to state that my stylesheets were loaded with
!important declarations, when nothing could be further from the truth.
Also, heres what SitePoints reference says on the matter of using !important:
So, if you dont trust me, trust them, a more authoritative source.
Mark
27
Mark
28
Sitepoint.
Sitepoint is a marketing business, not an authority. I hold them in
no higher esteem than any blog or other for-profit about design.
Sitepoint owns 99designs, a company that may have single-handedly
impacted the earnings for designers of web [and other] design downwardly
than any other organization. Honestly, Ive found information
here at SM far more valuable in my own work than anything Ive
ever gleaned from SPs countless books.
Regardless Im not sure how Sitepoints statement improves your position.
even onehas a huge negative
impact. If one is huge, would 13 not be astronomical? At what
point does it become loaded, if one is huge?
C.F. Action
29
Reply
Dave Sellers
30
Reply
Mohawk Kellye
31
Reply
Chris Trude
32
Reply
Brad Czerniak
33
Reply
Louispost author
34
Brad,
Youre absolutely right. An !important declaration is actually
the entire line, including the word !important. I guess I
didnt pick up on that, and was probably confused by the phrase
!important declaration used in the spec and other sources.
I think this is a good point, and I will likely edit the article to make this more clear. Thanks!
Reply
John
35
!important is awesome, it makes my styles work everywhere so I put it on everything. It even works in IE6.
Reply
Yoav
36
Reply
decibel.places
37
Reply
Mike
38
.blockItem.left#fourth{
display:block !important;position:absolute;float:left;display:inline;color:blue;font-size:12pt;font-size:14pt!important;position: relative !important;width:400px;height:250px!important;
}
Louis
39
Reply
Adam
40
Reply
Mike
41
@Adam
Like this?
.blockItem.left#fourth{
display:block
!important;position:absolute;float:left;display:inline;color:blue;font-size:12pt;font-size:14pt!important;position:
relative !important;width:400px;height:250px!important;line-height:1
!important;
}
its still going left.
Reply
John
42
@Mike:
Why are you repeating the same layout styles?
display:block !important;
display:inline;
position:absolute;
position: relative !important;
float:left;
something cant be position absolute, relative and floated left
and work right cross-browser. Its going to the left because it
says float: left.
Not sure what you are trying to accomplish here.
Reply
Ryan Mathis
43
Reply
Jeremy Carlson
44
Reply
Michael
45
This is interesting. YUI CSS uses the * CSS hack for IE6
declarations, but the CSS doesnt validate then. This seems like a
good alternative (still a hack, but slightly better). I may have to
make use of the !hotdog modifier, just too good to pass up.
Reply
Ryan
46
I personally use it all the time as a IE6 hack when using png images since IE6 ignores the declaration.
background: transparent url(images/cool_image.png) top left no-repeat !important;
background: transparent url(images/ie_image.gif) top left no-repeat;
Makes it easy to have the cool png image with partial transparency and also display a less cool image to IE6 users.
Reply
John
47
Reply
Ryan c
48
Reply
Tom
49
Reply
David Hendry
50
Reply
Lucian
51
Reply
Ferdy
52
Reply
Alex Karasyov
53
Reply
stang
54
Reply
Mark
55
Reply
Louis
56
Reply
TheAL
57
Ahhh, the thing that made custom Myspace code possibleby putting it on EVERY line of CSS. *lol*
Reply
Mark
58
^5 Al! Good to meet someone that knows and shares in my [former] pain!
Reply
eric
59
Reply
Pedro Magalhes
60
Reply
Brad
61
Reply
Jay Khatri
62
Reply
Raymond Bloom
63
Reply
Karen Wilson
64
Reply
HEM
65
Reply
Pankaj
66
Reply
Louis
67
Hi, Pankaj.
Thats a good question, and might not be so clear to people not familiar with those terms.
1. Declarations from the user agent are styles that are applied to
elements from inside the browser (i.e. user agent). Many elements
dont have any visible default styling, so most of what comes from
the user agent is invisible. For example, a paragraph element ( <p> ) is naturally display: block;. That style comes from the user agent.
2. Declarations from the user are styles that are applied by an
actual human viewing a website. If Im not mistaken, many browsers
allow anyone viewing a website to override the stylesheet using their
own stylesheet. The FF developer bar allows this, and Im assuming
the other browsers dev tools do too. These user
styles will obviously only be visible to the user that applies
them. Theyre basically local CSS rules.
3. Author styles are those that are declared in the linked
stylesheets in the actual web page. Those are the styles that are
referred to 99.9% of the time in any given web design article.
Hope that helps.
Reply
Pankaj
68
Thanks louis, we are having quite a debate here at the office. This what I really understood from your reply.
If I were to use !important in my style sheet &
overwrite the styles of User agent(Browser Style sheet), which results
in user style sheet being created on the fly. I am right
here, or off track?
Reply
Louis
69
Reply
Pankaj
70
Gaurav Mishra
71
.this-post-is
{
miss:dont !important;
}
Reply
Victor
72
Nice article !
Reply
Kiyan
73
Reply
Edward Wieczorek
74
Reply
Bob
75
If you have full control then sure, create your style sheets
without !important unless you absolutely need to use it for some of the
reasons stated above. However, if youre using stuff like
Sharepoint or building applications using Bing Maps, you may find that
you must use !important to override various styles.
I absolutely had to override some Bing maps stuff and some AJAX controls for modal popups, etc.
As the saying goes, never say never. Also realize that you
dont always have complete control when using third party
apis, etc. in your web projects.
Reply
valk
76
This is great!
Thanks.
Brief and clear and to the point.
Reply
Basic Desginer
77
Reply
LC
78
Reply
Francisco
79
I have to agree that !important tags are wrong when you have
control of the stylesheet and the markup, but when you deal with
situations like Sharepoint or trying to skin ugly coded cmss like
Oscommerce you have to use it sometimes sparingly.
Its the only tool to defeat hard coded inline styles so those of us sho have fought it before know its power.
Reply
Les
80
Reply
igotux
81
Reply
Hector Lee
82
Reply
sekhar
83
Grate article
Reply
David Martin
84
Reply
Richard
85
Reply
9swords
86
Reply
Flavio
87
Reply
Ian
88
I normally dont use !important, but have just come across somewhere where I might use it, and would like others opinions.
In .NET, I have a background-image defined for all input fields in a
form. I want this style to be used for all fields, except the button.
When you define an asp:Button, it gets converted into an input field.
You can specify a CSS class for the button, which I have done, but the
background-image in that doesnt overrule the one of the input CSS
declaration, unless I define it as !important.
This seems valid to me, but Im not 100% sure. Any thoughts?
Reply
Matt
89
Sorry but i find it a bit silly to NEVER use the !important declaration.
Ive written CSS for very arge websites and if I were to of never used
the !important declaration then i would of possibly died
from massive stress overload.
I think its fair to say try every other way possibly before resulting
to the !Important declaration but i dont believe
it should be avoided entirely.
Matt.
Reply
Willie
90
I agree with Matt and Bob, !important shouldnt be avoided completely, but as a last ditch effort. It is a useful tool.
For instance, say you you have a div that you want to add a div
dynamically on hover to change its background color. The order of the
declarations is important. Of course you could makes sure the order of
the stylesheets makes the hover class high on the food chain, but if you
dont have control of the order of the stylsheets, then you have
to use !important to make sure the class takes precedence. Otherwise,
the style application may depend on the how the stylsheets are ordered.
Reply
Ryan Curtis
91
Reply
Simon J.
92
Reply
Dwight Stegall
93
Who are you to tell us when we cant use !important.? Go soak your head. :)
Reply
Avanglist
94
@Chris Your
Wouldnt the use of media queries in your example of using
emerging concepts that may only be available within certain browsers
resolve your usage of !important?
Further more with your example in particular, these sort of emerging
concepts use vendor prefixes anyway so again the use of !important is
o
Reply
Reto
nick
95
Reply
96
Reply
97
Reply
Ravi Suryawanshi
98
Reply
Mwantiti
99
Reply
Steedan Crowe
100
Reply
Amrit
Krlis
Stefan
101
Reply
102
Reply
103
Reply
Peter
104
Reply
Roland
105
Reply
Dave
106
Reply
dennis iversen
107
Reply
EB
108
Reply
Nathan Z.
109
Reply
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and
rel="nofollow"
is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful
Your name*
Your email*
Your message*
Back to top
Smashing Book #4
Get our brand new Smashing Book #4, available as print and eBook. Learn more...
Smashing Workshops
Grab all published and upcoming Smashing eBooks, in one swoop. Learn more...
Join our hands-on full-day workshops, run by experts of the industry. Good stuff. Learn more...