How to Override Inline CSS Styles

This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about CSS, you may find this recent article on CSS techniques for retina displays of great interest.

Override inline CSSOne of the most powerful features of CSS is the cascading. Knowing how a browser chooses and applies your styles is invaluable knowledge. Novices can find it especially confusing given that style use is influenced by the method used to include the CSS, the order of the rules, how the selectors are specified, and special declarations such as !important.

Inline styles are those defined in the HTML itself, e.g.


<p>This is an 
<strong style="color: red;">inline style that should be blue</strong>
.</p>

Inline styles have the highest priority of all CSS. In general, I would recommend you avoid using them and place your CSS declarations in external files. However, you may not have that luxury if you are working on a legacy system or do not have direct access to the HTML code.

Fortunately, there is a way to override inline styles from an external stylesheet:


strong[style] { color: blue !important; }

This will force the text in the strong tag to become blue in the example above. The method appears to work in all major browser, including:

  • Internet Explorer 8.0
  • Mozilla Firefox 2 and 3
  • Opera 9
  • Apple Safari, and
  • Google Chrome

Internet Explorer 6 and 7 are the notable exceptions. However, this technique is not something you should use on a day-to-day basis. Keep your CSS clean and only override inline styles when there is absolutely no alternative.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Practical CSS.

Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • andré luís

    That’s because IE6 and 7 do not support the attribute selectors… not !important. Do you really need that [style]?

    Like you said.. you should never use !important on your everyday code. And you shouldn’t have to deal with inline styles, in the first place. At least in a perfect world you wouldn’t. ;)

  • http://www.cssispoetry.com BlakeAnthony

    inline style that should be blue

    Huhhhh? equals red not blue
    You can also put the RGB colors in

    strong {
    color:#ff0000;
    }

  • physio

    Wow, it says I’m posting this tomorrow. And I just read the first post and it supposedly hasn’t even been posted yet. Am I time traveling?

  • pixel8me

    I often use this method to apply styles to particular elements in forms that I don’t have ‘full’ control over e.g. input[type=text], input[type=image], input[type=radio], and so on. Good article.

  • Tarh

    @physio: At least you know the world won’t end tomorrow!

  • @jpstacey

    Good point: I’d forgotten about that particular precedence trick, and tend instead to undefine inline styles (and <input size="..."/> attributes) across the whole DOM with Javascript.

    But it’s really, well, important to remember that !important should only ever be used when you don’t have any control over certain succeeding style declarations e.g. inline styles or styles from third parties, or when you’re styling HTML you’re not allowed to add classes or IDs to. If you start using it for convenience, because you want to override an earlier specifier but can’t be bothered to add an ID on an element to be able to construct a more specific rule, then you’ll find that !important will eventually proliferate, because you’ll add another !important somewhere else to override the first, and another, and….

    I’ve witnessed body * {font-size: 12px !important} at the top of a 1500-line stylesheet in the past. I still wake up some nights, in a cold sweat, just imagining it. There are some things a man just can’t un-see.

  • Anonymous

    Chris Coyier (CSS Tricks) wrote about this exact topic very recently.

  • http://pixopoint.com/ ryanhellyer

    Jeeze, I can’t believe I didn’t know this already. This could have saved me a lot of work in the past!

  • Paurush

    Guys no need to put any [style] tag there, it will work even without that. :)

  • http://www.optimalworks.net/ Craig Buckler

    The [style] isn’t used to set the tag blue – it’s used to target that specific inline style. Without it, all your <strong> tags would become blue. You should be as specific as possible to ensure you’re not going to have a dramatic effect on your page.

    Saying that, if you don’t use the [style] it’ll work in IE6 and 7.

  • Martin Kliehm

    !important is considered harmful for accessibility because it will also override custom user stylesheets. For example a person with vision impairment might find it easier to read text in yellow on a blue background. Your !important declaration will override his preferences and make the text illegible.

  • Stevie D

    This is one of those tips that is all well and good, but if you ever find yourself using it, you have to ask yourself what the hull has happened – you should never need it!

    Inline styles have the highest priority, overriding embedded [style] elements and linked stylesheets, because you have specifically chosen to apply a specific style to a specific element – if you’ve gone to the trouble of doing that, why would you want to override it with a global style?

    The only reason that I can think of is BRAT – or if you have a particularly awful CMS.

  • Stevie D

    The only reason that I can think of is BRAT – or if you have a particularly awful CMS.

    Sorry, lapsing into jargon there.

    BRAT is “Big Red Angry Text”.
    http://accessites.org/site/2006/07/big-red-angry-text/

    This is used where the designer wants to not only override any inline styles that the client puts in, but also to make a point and stop the client from doing it again! It targets any element that has a deprecated inline attribute, or deprecated element, and turns that element big, bold and red, thus ensuring that when the client tries to ruin your immaculate design by adding align="center" to a paragraph or wrapping the whole lot in >font face="comic sans ms"<, it will backfire, completely fail to do what they’ve asked it to do [1], and make it extremely obvious that they have done something horrible.

    [1] I suppose you might need to have an alternative plan for the one occasion that the client adds >font color="red" size="x-large"<>b< to the page!

  • markfiend

    Stevie D: Thanks for the BRAT link. Will come in very handy! >:-)

  • Anonymous

    strong{ color: blue !important; }

    This code can also work without [style]

  • Mj

    My boss said refrain from using inline styles… its better to separate css.

  • http://flexewebs.com/semantix

    This guidelines is very useless. Any CSS technique which does not work in 2 of the world’s most popular browsers is not really worth knowing (for now).

    I can see how being able to override inline styles sheets is an incredibly useful thing to be able to do, but for most part I needed to be able to this when working in those browsers which are not supported.

  • http://www.calcResult.co.uk omnicity

    @http://flexewebs.com/semantix
    It does work in IE6 and IE7, but the example was too complex – the [strong] part of the selector is not essential to this idea, just for the example used.

  • memco

    Wow, I completely forgot I could override styles in this way. After reading @Stevie D’s comment I now know how I can get the design the way I need it without having to fight an army of font tags.

    …Still have to clean it all up eventually, but this way I get the look without having to mastermind more cleanup regex voodoo

  • Ram

    Good one….

    How to override the inline style if suppose the inline styles itself having the declaration ‘!important’ Ex: <strong style=”color: red !important;”>

  • karen

    Awesome fix, thank you! Been looking up how to do this for awhile

  • http://websites.burghhouse.com John Turner

    I want to stop browsers from underlining a link. Not all links – a particular link. But I can’t get it to work.

    I use footnotes on my pages. And the footnote marker is an anchor which links to the actual footnote text. I have set up a CSS style called “.footnotemarker” which deals with making the footnote markers loklike footnote markers. It looks like this:
    .footnotemarker{color:#ffff37;font-size:60%;font-weight:bolder;vertical-align:top;}

    The HTML within the page is this:
    (1).

    It all works and the footnote marker looks like a footnote marker, but because it is a link the browser underlines it. Call me picky but I don’t want it underlined.

    I know how to switch off underlining for all links (using a:link, etc.) and I tested it and it worked – just ass “text-decoration:none” and none of the links are underlined. But I only want to switch it off for footnote markers.

    Easy, I thought. Go back to the original A:Link settings and add the “text-decoration:none;” to the style sheet. But the browser ignored that.

    So I read around a bit and was reminded that inline styles can override stylesheets, so I added style=” text-decoration:none;” in the , just after the class declaration. The browser ignored that too. Hmm, I thought. A challenge!

    I read that you can add “!important” to a style declaration, so I tried adding that both to the CSS declaration and to the inline CSS, and the browser still underlined it.

    Any ideas? The browser in question is Internet Explorer 8, which I know features “Microsoft knows best” technology, so is it ignoring me because Microsoft thinks all links must be underlined and so they must? Has anyone found a way to remove underlining from only selected links?