Grow your CSS skills. Land your dream job.

Override Inline Styles with CSS

Published by Chris Coyier

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word.

Often we think of inline styles as a way to override styles we set up in the CSS. 99% of the time, this is the case, and it's very handy. But there are some circumstances where you need to do it the other way around. As in, there are inline styles on some markup that you absolutely can't remove, but you need to override what those styles are. This could be markup that is being inserted onto the page from foreign JavaScript or perhaps generated from the bowels of a CMS that you cannot control easily.

Thank our lucky stars, we CAN override inline styles directly from the stylesheet. Take this example markup:

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

We can fight that with this:

div[style] {
   background: yellow !important;
}

Other places this has been shared:
Soh Tanaka, Natalie Jost

Comments

  1. Wow, this is something I didn’t know but could definitely use. We have a few clients that edit their sites with Adobe Contribute and end up using non-approved colors or styles – so this would definitely help override that.

  2. FJ

    Cool. But this doesn’t work for IE6.

    • Why use IE6. It’s a browser that is almost 9 years old….

      Nice tip BTW :)

    • John Labriola

      Agree, don’t like IE6… but try telling that to CIO/CTO’s across big corporations where the majority of users are on IE6.

    • This is exactly my feeling everytime I read someone dismiss IE6 outright.

      When a large corporation is unable/unwilling to upgrade their users – and those same users happen to be customers of that company (like… at a financial services company for example) then the % if IE6 can be drastically higher than stat sites often report.

    • Benjamin

      I must agree with John and Greg. A statement like “then don’t use it” really doesn’t fly with me – because I am NOT using it- very few designers/developers do use it (for browsing that is, for testing , of course). However, we have clients that do use IE6. John’s example is 100% spot on. I have a large energy company as a customer and all of their employees are required/stuck with IE6 and it is going to be staying that way for at least another year or so.

      So, the “don’t use it” argument really doesn’t work.

    • Jamon

      It’s possible to have more than one browser installed on a system. Use IE6 for their ancient software systems and Chrome/Firefox for everything else.

      Also, it doesn’t matter if this trick doesn’t work in IE6…they’re used to seeing funky things on websites if they use IE6 regularly.

      So saying “doesn’t work in IE6″ is just as annoying as saying “don’t use it.”

    • Simple. Tell them that it causes a loss of productivity because it doesn’t support time-saving features such as tabs. Make-up some BS numbers that “prove” that they’re losing $500,000 a year in lost productivity. Then offer your consulting services and upgrade their systems.

    • The most common reason that a corporation refuses to switch from IE6 is because they are stuck with some system or software that only works with IE6. The cost of upgrading the infrastructure is usually prohibitively high – definitely greater than the cost of lost productivity.

    • I don’t like the idea of BSing my clients for my own convenience.

      Recently I was looking at the stats for a site I surmised had a broad audience – a major musical event – and noticed that IE6 had a larger share than all versions of Firefox.

      Interpreting these results, it’s more important to support IE6 than it is Firefox.

      Bobby van der Sluis has a nice JS function that avoids inline styles; it’s not always possible, especially if using a library.

    • recently when saw google analytics of one of my sites. 40% of them were IE6 users. Its sad but we have to work with IE6 users in mind atleast for another 1 year

    • My stats for the last month? 66.49% using IE6 due to our primary client being a large corporation currently unwilling to upgrade. Not much you can do about that, and certainly not something you can just ignore…

    • dude

      They can deal with the ugly styling, then.

    • I can’t really understand the decision of corporations/customers to use IE6. I respect their right to say, as the client, “We’re using X”, however.

      It just kind of confuses me – newer browsers are more secure and faster. What is the rationale behind sticking with IE6 other than “It’s what we use”?

    • Illarane

      It’s the whole big business mentality. Consider, for instance, the following:

      How many Oxford alumni does it take to change a lightbulb?

      “CHANGE?!”

    • Chase

      The problem is that a lot of consumers arent web savvy like those who post on sites like this. They dont know to upgrade or how to upgrade. It sucks but its a fact of life. The best solution is to keep things simple.

    • I spoke to some friends working for big banking/law firms recently and they seemed to understand their companies have in house systems that won’t work outside IE6. My guess was that these might be browser based/intranet solutions that were built in such an backwards fashion that they just don’t function ‘properly’ in newer browsers.

    • Yeah, this is very much the case. It’s not so much that these corporations, even the slow moving and non-techie ones, want to use IE6, it’s that they’re largely locked in. There are a lot of pieces of business and enterprise software that are incompatible with non-IE6 browsers, usually bespoke software that these companies have invested heavily in and which are necessary to their day to day operations.

      Updating that software would require significant financial and time investment, and probably operational change as well, so it’s not feasible for them to upgrade. So you’re not going to see wholesale rollouts of updated browsers, and many of the companies may have to enforce a “don’t upgrade IE” policy to ensure all their employees have access to the relevant software. Sure, employees might be free to install alternative non-IE browsers on an individual basis, but if IE6 is the required company standard, most of them will just stick with that in the workplace.

    • unregistered

      I agree to the statement of your friends.
      I am working for a company that got stuck in exactly this situation. A lot of online-live systems are visualized in IE6 for mainly two reasons:
      1) No time for the developers to “adapt” to any other browser (even if they would like to)
      1a) The Chiefs: “Well it works – so what? It’s Intranet only”. Rather than installing new browsers etc. It is a waste of time and IT secures, firewalls, … In other words never change a runnning system – unless big bang was there…
      2) On top of this: Standardization, …
      A no-no: different browsers: too much for the admins, they are already at their limit deploying all the standardized software packages.

      Instead of continuing:
      As a web-designer I am working in DESPAIR county. The only HOPE: Sooner or later supreme court will rule.
      Swallow it or stop signing contracts with customer that want IE6 – but please stop moaning. I can not stand it any longer…
      At the end ist is always: “money talks and ……hit walks”

      Whether we like it or not is not the question! Can we change it? Or will time change it for us?
      b r
      unregistered

    • peace !!!

  3. You crazy mofo! I love it.

  4. Yeah, attribute selectors get no love from IE 6 (and for those who say why use IE 6, well, you just don’t get it…)

    Still a nice tip/trick, though.

  5. iamjustinhines

    IE6 users will just have to deal with a red background then.

    • Jamon

      Exactly.

    • Yep–

      Just because something doesn’t work in the backward-ness that is IE6 doesn’t mean it shouldn’t be used…especially in this case where using or not using it will come out with the same result in IE6, but a better result in IE7+.

      That’s a no-brainer…

  6. Snookerman

    This is what css-tricks is about! Keep ‘em comin’

  7. Great post thanks :)

    hav a question: whein i select the text on this article.. it selects the text with red background colour.. how do this happen?? this looks really impressive..

    thanks

    • I found this code in the stylesheet:*::-moz-selection {
      background:#FE4902 none repeat scroll 0 0;
      color:white;
      }

      and if you search “text selection” on this site, you find … another nice trick! :)

  8. Ryan

    you can always override inline css with “!important” added to your external stylesheet. works in every browser.

    • I don’t believe this is true. If you have a test case you can present, I’d be interested to see it.

    • The !important keyword creates a separate, second inheritance tree. An !important declaration will override all other declarations, whether linked, blocked, or inline…except for any other !important declarations that fall below! :)

      Here is the spec’s explanation of it.

      Try it yourself!

      style.css:
      p { color: red !important; }

      test.html:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
      <head>
      <link rel="stylesheet" href="./style.css" type="text/css" media="screen">
      <title>Testing CSS Inheritance with !important</title>
      <style type="text/css">
      p {
      font-weight: bold;
      }
      </style>
      </head>
      <body>
      <p style="color: blue; font-weight: normal;">Testing</p>
      </body>
      </html>

    • So I did put together a test page:

      http://css-tricks.com/examples/OverrideInlineStyle/index.html

      The scoops is YES, the !important part does the trick all by itself. It doesn’t REQUIRE the [style] attribute selector to override the inline style. And in fact, that [style] attribute selector makes it NOT work in IE 6.

      However, the [style] attribute selector is still useful in ONLY selecting only particular elements that have inline styling and ignoring elements that do not, which can be extremely useful.

    • Interestingly enough, the 2nd box in your example link shows up with a red background for me in Safari 4 (public beta). The other two examples work great. You might want to incorporate the !important directive as an update to this post for those of us who are unfortunate enough to have to put up with IE6 (and, for some sad reason, Safari’s non-support for this override)

    • this demo it’s not working IE7

    • bezoeker

      Yeah, the second one appears to be red too in my Firefox (3.0.10)

  9. Joel Kidd

    I have a quick question about this. Lets say that for some reason you have 2 divs on the same page with inline styling. Would this over ride both divs? If so, how would you target only one and not the other?

  10. This solution don´t work in IE, in any version. I make the test in IE8 too.

    • Yes it does.

      Post the test, let’s have a look.

    • It will work if IE7 and IE8 are in Standards Compliance Mode, which you can enforce with a correct DOCTYPE. If you’re beginning your HTML test documents with <html>
      try beginning them with
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      or
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    • hi James,

      it’s still not working can you help me?

      my cod is

      How to Override Inline Styles with Style Sheet

      div[style] { background: yellow !important;}

      The inline styles for this div should make it red.

    • code

      print("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

      How to Override Inline Styles with Style Sheet

      div[style] { background: yellow !important;}

      The inline styles for this div should make it red.

       

      “);

  11. For IE6 (The Little Blue) eliminate “[style]” only.

  12. I don’t know what you guys are talking about, the !important tag works fine in IE6. I’ve even tried taking out the doctype and it still works in IE6. I’m testing it in a full fledged version IE6, not a tester (IEtester, etc).

    I have to use them ALL THE TIME at my fulltime job (I work for Belo Interactive, 9th largest media company in the nation [they own a shitload of news sites]), and there are clients/”site managers” at a number of our news sites that try and do their own work, which really just f**ks everything up with inline styles, tables, and the most dreadful shit you’d ever look at. Seriously, it makes baby jesus cry.

    • Yeah, I’m not familiar with the [style] you have in your CSS. What’s that used for? It doesn’t need it.

    • The example uses [style] (the attribute selector) to show us that the CSS is targetting the div with the “style” attribute. You could also use a class or an id. Usually you don’t want just “div”– unless you want a yellow background on every div on the page??
      Though maybe it was a poor example choice since people who don’t know CSS would be trying to use it and then wondering why it doesn’t work in old browsers.

      For those who say it works in IE6, remember that IE6 has a bug where anything after the !important declaration gets counted (instead of overridden like it should). So you STILL have to be careful with it in IE6.

  13. I am a fan of just old fashion “!important” that will override any inline stye with out the use of the attr sections [style]. I’m not sure why you would even use it because it breaks in IE6

  14. Yeah i would just us the important tag and give the div a class or id, or am i missing something?

  15. Jerry

    Thanks! You just saved me today. Some Drupal module or update inserted a “display:none” on a content entry field and I was able to get it back. I still have to figure out why, but it’s back.

  16. Thanks much! I love learning these kinds of tricks!

  17. Really nice tips. Thanks.

  18. Daniel

    Really awesome trick Chris!
    I think that you should clarify the purpose of “[style]” though, and mention that the overriding works without it..

  19. Thanks! Very helpful :)

  20. Thanks for the tip, I’m sure I’ll be using this sometime in the near future :)

  21. It can work without “[style]”.

  22. Yeah i would just us the important tag and give the div a class or id, or am i missing something?

  23. bbyrdhouse

    The ““!important” rule does indeed work just fine in IE6 …. however as with other browsers it only works when it is applied to the last instance of the id or class in the style sheet or override.

    Example;

    If your stylesheet has defined a class like such

    .header{
    background-color: red “!important”;
    }

    and then later on in your stylesheet you have another instance where you define the same class like such

    .header{
    background-color: #f1f1f1;
    }

    then the browser will use #f1f1f1 instead of red even though “!important” has been applied to red.

    Whenever I use them I try to add them at the bottom of the stylesheet to avoid any conflict.

  24. Why is anyone using inline styles at all? Messy.

  25. Will

    Awesome timing.

    I’m styling a site that’s resembles something from the 90′s and I currently can’t touch the HTML. This is what’s in the markup:

    <font size="-2" color="red"> :: events</font>

    I was surprised that this worked but it did:

    font[color]{color:green;}

    This is a test, does this work?

  26. That should work, but a couple notes: it wont work in IE6… not sure if other versions support attribute selectors. Also, that will change the color of any font with a “color” attribute, so if there are other areas in the markup containing those will also be targeted by the font[color] selector. I ran into an issue where this method would have saved me tons of work, if I wasn’t required compatibility with IE6

  27. Very usefull, Thanks !

  28. So simple, great tip, I didn’t know there is some way to override inline styles at all, very handy to override right on stylesheet. Thanks!!!

  29. HMDesign

    This is what every CSS experts should know.

  30. Little tricks can change the world smoothly, nice tricks – thanks.

  31. I actually enjoyed more reading the comments than the post ;)
    Thanks anyway for sharing the knowledge/wealth :)

  32. nice trick, but hope I’ll not need it

  33. awesome Thanks for the advise

  34. Crazyguy

    Very Useful one. My programmers will always write inline style. This will be helpful for me to find and fix in quick succession. Thanks Man :) Great JOOOOOOOOOB

  35. Apparently you can override an inline style with a global style in IE7. The “!important” is needed for other browsers.

    p {text-indent:0px; text-indent:0px !important;}

    content goes here…

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".