!important CSS Declarations: How and When to Use Them

Advertisement

When the CSS1 specification1 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.

Adding !important in Developer Tools

Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.

A Brief Primer on the Cascade Link

Before we get into !important declarations and exactly how they work, let’s give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity2 in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade3 as discussed in the spec:

  • Find all declarations that apply to the element and property
  • Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
    • Declarations from the user agent
    • Declarations from the user
    • Declarations from the author
    • Declarations from the author with !important added
    • Declarations from the user with !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. Let’s look at !important in more detail.

Syntax and Description Link

An !important 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 Czerniak4 for pointing out this discrepancy). Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#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 !important.

Without the use of !important, 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. it’s listed second). Also, the second block has more specificity (#container followed by #example instead of just #example). But with the inclusion of !important, the first font-size rule now has more weight.

Some things to note about !important declarations:

  • When !important was first introduced in CSS15, an author rule with an !important declaration held more weight than a user rule with an !important declaration; to improve accessibility, this was reversed in CSS26
  • If !important is used on a shorthand property, this adds “importance” to all the sub-properties that the shorthand property represents
  • The !important 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 won’t break it)
  • 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 doesn’t invalidate your CSS)
  • In IE6 and IE7, if you use a different word in place of !important (like !hotdog), the CSS rule will still be given extra weight, while other browsers will ignore it

When Should !important Be Used? Link

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

Never Link

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

To Aid or Test Accessibility Link

As mentioned, user stylesheets can include !important declarations, allowing users with special needs to give weight to specific CSS rules that will aid their ability to read and access content.

A special needs user can add !important to typographic properties like font-size to make text larger, or to color-related rules in order to increase the contrast of web pages.

In the screen grab below, Smashing Magazine’s home page is shown with a user-defined stylesheet overriding the normal text size, which can be done using Firefox’s Developer Toolbar:

User Style Sheet Added to Smashing Magazine

In this case, the text size was adjustable without using !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 !important declaration, the user 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 user’s power, even if the author has abused !important.

To Temporarily Fix an Urgent Problem Link

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.

To Override Styles Within Firebug or Another Developer Tool Link

Inspecting an element in Firebug or Chrome’s developer tools allows you to edit styles on the fly, to test things out, debug, and so on — without affecting the real stylesheet. Take a look at the screen grab below, showing some of Smashing Magazine’s styles in Chrome’s developer tools:

Overriding Styles in Chrome's Developer Tools

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.

!important 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.

Here’s the same style rule with !important added. You’ll notice the line-through is now gone, because this rule now has more weight than the rule that was previously overriding it:

Adding !important in Developer Tools

To Override Inline Styles in User-Generated Content Link

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

For Print Stylesheets Link

Although this wouldn’t be necessary in all cases, and might be discouraged in some cases for the same reasons mentioned earlier, you could add !important declarations to your print-only stylesheets to help override specific styles without having to repeat selector specificity.

For Uniquely-Designed Blog Posts Link

If you’ve dabbled in uniquely-designed blog posts7 (many designers take issue8 with using “art direction” for this technique, and rightly so), as showcased on Heart Directed9, you’ll 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 post10 on the Digging Into WordPress blog.

The use of !important 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.

Conclusion Link

!important 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 !important is not always necessary.

Nonetheless, !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. It’s certainly beneficial to understand it better and be prepared to use it should the need arise.

Do you ever use !important in your stylesheets? When do you do so? Are there any other circumstances you can think of that would require its use?

Further Resources Link

Footnotes Link

  1. 1 http://www.w3.org/TR/REC-CSS1-961217
  2. 2 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
  3. 3 http://www.w3.org/TR/CSS21/cascade.html#cascade
  4. 4 http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/#comment-491663
  5. 5 http://www.w3.org/TR/REC-CSS1-961217#important
  6. 6 http://www.w3.org/TR/CSS2/cascade.html#important-rules
  7. 7 http://www.smashingmagazine.com/the-death-of-the-blog-post/
  8. 8 http://www.alistapart.com/articles/art-direction-and-design/
  9. 9 http://heartdirected.com/
  10. 10 http://digwp.com/2010/02/custom-css-per-post/
  11. 11 http://www.w3.org/TR/CSS2/cascade.html#important-rules
  12. 12 http://reference.sitepoint.com/css/importantdeclarations
  13. 13 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
  14. 14 http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
  15. 15 http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Agree with Louis on this one, though could have a been a shorter article if Louis had simply said:
    DON’T. EVER.
    ;)

    11
  2. 2

    In my experience so far, the usage of !important can always be overcome with other measures. It’s a good article for those who are not familiar with the keyword, however for the more experienced readers it’s merely an average read.

    2
  3. 3

    I use the !important declaration as a hack for IE6. IE6 doesn’t recognize !important. It also doesn’t work with transparent PNGs. So you can declare a transparent PNG as a background and make it important. Then you can re-declare the background as reasonable GIF replacement or nothing (if it’s an somewhat unnecessary drop shadow for example). IE6 will bypass !important and set the background to nothing. Well behaved browsers (which also support transparent PNGs) will show the PNG.

    But other than that, yeah, I’d say avoid it.

    -8
  4. 4

    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 they’ll get applied, like:

    .last { margin-right: 0 !important; }

    5
  5. 5

    Yep it’s definately useful for overriding inline CSS that you don’t have any control over.

    I also occasionally use it if I am using a class specifically for changing text colour. For example I’ll 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 :)

    -4
  6. 6

    !important is awesome, it makes my styles work everywhere so I put it on everything. It even works in IE6.

    -4
  7. 7

    @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;
    }

    it’s still going left.

    -2
  8. 8

    Thanks, hacks are for chumps.

    -9
  9. 9

    Soooo no one uses the !important tag on an element with min-height to get ie6 to work (min-height: 300px, height: auto !important, height: 300px) ? Of course I now use the conditional comments to check for browser which then adds a class to the body, and target IE6 that way now. But before that, that was the only time I used the !important tag. I find it hard to believe no one did/does that anymore though.

    -2
  10. 10

    This is interesting. YUI CSS uses the * CSS hack for IE6 declarations, but the CSS doesn’t 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.

    -3
  11. 11

    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.

    0
  12. 12

    I agree for the most part that it should be used very little, bet as the article indicates, there are some situations that call for it. For example, I just did a small jQuery project for my corporate web site. I do not have control of all the CSS files and someone else had used it define all link hovers. I could not path to my link colors and change their hover color. So I added the !important to my specific link change to force my cascade to work correctly. Problem solved and I was specific enough to not impact the rest of the site.

    We tend to approach solutions from the egotistical point that we have complete control. On a very large site with thousands of pages, there are usually multiple people involved and you can’t go back and fix their code. So a rule I follow is to try not to use it if you are in control. Solve the problem correctly without the use of the hammer. If you have to use it, then be considerate and specific enough to not force other people coming after you to have to over use it to meet their design specifications as it can cause a long term cascade of its use until every style has to include it.

    2
  13. 13

    The article missed the one thing I consistently use !important for: Chrome and its damn default form styles! Google, I will tell YOU what I want my forms to look like!

    -2
  14. 14

    Great article – !important feels like a hack when its being used, but once you’ve exhausted all avenues you just have to use it – especially when branding SharePoint, Microsoft loves their inline styles!

    1
  15. 15

    Working with WordPress plug-ins, I have to admit sometimes this is the only way you can do it, without overriding the plugins styles, which can be erased after an upgrade.
    Otherwise, I avoid at all times!

    6
  16. 16

    Great article. I wish less people used the !important attribute=)

    1
  17. 17

    I’ll have to second the SharePoint comment, and unless you want to re-write core.css to your exact specification and then get your changes overwrote with a service pack… you’ll just stick with !important

    2
  18. 18

    Ahhh, the thing that made custom Myspace code possible…by putting it on EVERY line of CSS. *lol*

    -1
  19. 19

    actually, to expand on your point about Overriding Inline Content – if you think about an Inline CMS, the !important keyword can be very important. ;) Assuming you have the default styles for the CMS elements declared above the user styles, the user can unwittingly modify those default styles. Granted, the user could always write a rule with higher priority, but in most cases the !important tag can be a crucial fix for maintaining the look of your CMS elements.

    0
  20. 20

    Thank you for that article! My gut feeling always told me to avoid this ;-)

    0
  21. 21

    Awesome. How this great idea you get ? I think – !important – ‘s behavior very from browser to browser.

    1
  22. 22

    It’s good for IFRAMES ! Where the CSS is included on other server… I try not to use the !important unless it’s veeeeeeryy important! :)

    1
  23. 23

    I disagree…..I know that I’ve been forced to use !important on stylesheets because I was skinning Microsoft SharePoint which has some very “closed” code. It will often render inline styles in its HTML, and the only way to override the style is to use this method. If there was no point in having it, it probably wouldn’t be supported by CSS3 and the browsers.

    15
  24. 24

    In my experience, you should only ever use it to override horrible, inline CSS that has been placed there normally by a rubbish ASP.NET back-end.

    8
  25. 25

    I admit I’m abit of a pain for using the !important alot.. really does vary from job to job and depending what it’s actually for.

    I suppose if you’re doing a high paid design job where you have the time to perfectly layout your CSS then it will perhaps won’t need to be used, however it’s the real world and sometimes it’s just easier.

    Especially when doing custom headers etc and when you want to force (regardless of whatever anything else says) colours, styling and font-size etc.

    To sit and say !important should never be used really is quite ignorant.

    The Irony in this post is that @LouisLazaris needs to practise what he preaches, his own website is full of !important decorations, ignorance is bliss.

    4
  26. 26

    Nice read…. #article { agreed !important; } <== haha! Cheers!

    1
  27. 27

    I think you missed a colon, it won’t validate ;)

    0
  28. 28

    “In my experience, you should only ever use it to override horrible, inline CSS that has been placed there normally by a rubbish ASP.NET back-end.”

    That’s exactly why I use it as well. -_-;;

    0
  29. 29

    On my companies project, we have a global CSS file where I overwrite a lot of the CSS that was written in the base software. To overwrite everything, I could of used a crapton of !important; calls, but i instead just used specificity (adding parent container calls before the actual element calls) to do so. Might be more or less code, but It works better and cleaner this way.

    0
  30. 30

    !important is not a declaration. A declaration is a property:value; pair. !important modifies the value of one property. I don’t know the precise term used to describe this type of modifier, but it would be confusing for a component of a declaration to also be called a declaration.

    I can see from the CSS1 spec how this misconception must have occured, though. “A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.” isn’t exactly the clearest language ever. I think they meant “A reader rule with a declaration containing !important will override an author rule with a normal declaration. An author rule with a declaration containing !important will override a reader rule with a declaration containing !important.”

    As such, the use of the definite article, as in “The !important CSS Declaration” is improper and confusing. Otherwise it was a fantastic article!

    5
  31. 31

    In my mind it’s the equivalent of the goto keyword that exists in some programming languages. Never to use it. If I want to override an inlined style I clear that style using javascript.

    -4
  32. 32

    I was recently overridden on a project by the xbrowser team. Here is an excerpt of the css they added (find the def that is not !important – if you can!)

    BODY.user_edit #tabs-wrapper { display: none !important; }
    BODY.user_edit .tabs.secondary { display: none !important; }
    BODY.user_edit #user-profile-form { margin: 50px 60px 60px 60px !important; }
    BODY.user_edit { padding: 0 80px !important; }
    BODY.user_edit FIELDSET A { padding-left: 0px !important; }
    
    BODY.user_register #container { margin-top: -15px !important; }
    ...
    2
  33. 33

    I had trouble getting this to work in IE7:

    .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;
    }

    Is important why it’s going to the left?

    -5
  34. 34

    Mike, I think a line-height should work.

    -2
  35. 35

    Great article. It really clarified things for me.

    -1
  36. 36

    Um… No, my own website is not “full of !important declarations”. Please do your research before slandering an author.

    There are exactly 8 !important declarations in my main stylesheet, and 4 others in a stylesheet for smaller resolutions — and every single one of those !important declarations is applied to override styles set by the BSA ad block. I probably could have mentioned that as a possible use in the article, but to be honest, I don’t know for certain if that’s the best (or only) way to set those styles, but it just happens to be the only solution that worked on my site.

    -6
  37. 37

    Mark, the empty stylesheet declaration is for a stylesheet that gets dynamically changed based on the screen size. I don’t think there’s anything wrong with having a linked file that’s missing on a website, but it serves a purpose anyhow. It was just easier to code that way, since I pretty much coded my own solution for that stylesheet switcher.

    Also, as I mentioned in a previous comment, all the !important declarations are to override styles set by the BSA ads, so they are being used for a legitimate purpose, and not just out of laziness.

    1
  38. 38

    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 can’t justify its use even in those circumstances. I guess it’s acceptable for a personal blog or something, though, since it’s unlikely anyone else will use the code.

    1
  39. 39

    Mike, I’m not completely sure what you’re trying to do there, but keep in mind that if an element is floated left, it will stay as a block element, even if you tell it to be “inline” in a later line of code.

    -1
  40. 40

    Brad,

    You’re absolutely right. An !important declaration is actually the entire line, including the word “!important”. I guess I didn’t 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!

    0
  41. 41

    Its really very very !important as this is going to solve lot of my issues that were in past. I was really finding difficult to use Requiredfieldvalidator under updatepanel due to certain reason of rendering. I think now it will be solved.

    Thanks for sharing.

    -1
  42. 42

    Its even really important when Asp.Net don’t show the validator content as the property never get changed from display:none. we can manage this. Regarding Asp.Net, It really don’t care about developers’ preference and even includes inline css whether we want it or not and the way it renders the control is bullshit. You really can’t make any Tableless website.

    I think this is the reason of php’s poplarity.

    -1
  43. 43

    Its Adam might be referring to this website, which by my count has 121 occurrences in the default stylesheet alone.

    1
  44. 44

    ”When Should It Be Used?”

    ”To Override Inline Styles in User-Generated Content”
    Oh, yes….YES!! You can’t imagine how many headaches WYSIWYG editors, CMS and other generated crap have given me over the years… thank God !important exists, of course, there’s a HUGE logic flaw to use !important that way, I mean, if you need to overwrite something, then maybe stop that something from happening? Yeah, in a perfect world that’s what I would do, but since it doesn’t work that way… !important it is for me! :)

    Also, I really liked Steven Schrab’s approach – using it as a IE6 hack, of course, sad that we still have to develope something for IE6…

    2
  45. 45

    Just to clarify:

    IE6 doesn’t ignore !important declarations; it ignores an !important declaration for a property that’s repeated in the same declaration block.

    IE6 treats !important exactly the same as every other browser, except for the above.

    1
  46. 46

    Thanks for the clarity!

    -1
  47. 47

    This is a problem within SharePoint and the add-ons that third party vendors pile on. While you may have to use !important because of this, for most people who have control over their markup and stylesheets, the only time to use it is never.

    3
  48. 48

    Nice. Never too old to learn. I’ve seen this property a million times in tutorials on how to hack browsers into compliancy but never realized that it has a designed purpose like this.

    0
  49. 49

    @Its Adam – Good on you for checking out this guy. 13 instances of !important in two stylesheets on his Impresive Webs site, plus a 404 error for a linked stylesheet that doesn’t exist. Kinda sloppy work for someone lecturing on proper technique. There’s also one more !important on his Interviews site.

    I had forgotten about !important. I haven’t used it since the frustrating days of Myspace profile v1 with the horrible tug-of-war trying to get things to fit into that horrible code. I haven’t used !important in at least 4 years. I didn’t know anybody was still using it.

    0
  50. 50

    You’re right, he may have been referring to SM, and not Impressive Webs (my site). So I apologize to Adam for that. However, people should generally understand that most of the top design blogs post articles by outside authors. The author articles don’t necessarily reflect the coding practices of the site on which the articles are posted.

    So when he says “the author’s website”, I assume he knows what he’s referring to. In that case, he’s completely wrong, as I hardly ever use !important declarations.

    -7

↑ Back to top