How to Override Inline CSS Styles

By Craig Buckler | May 27, 2009 | JavaScript & CSS

Override inline CSS One 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.

Written By:

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Website
>> More Posts By Craig Buckler

{ 22 comments }

John Turner November 5, 2011 at 3:12 am: 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?
karen October 26, 2011 at 3:21 pm: Awesome fix, thank you! Been looking up how to do this for awhile
Ram June 11, 2009 at 5:55 pm: Good one….
How to override the inline style if suppose the inline styles itself having the declaration ‘!important’ Ex: <strong style=”color: red !important;”>
memco June 5, 2009 at 1:13 am: 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
omnicity June 3, 2009 at 2:21 am: @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.
http://flexewebs.com/semantix June 2, 2009 at 9:12 am: 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.
Mj May 30, 2009 at 12:20 am: My boss said refrain from using inline styles… its better to separate css.
Anonymous May 28, 2009 at 9:08 pm: strong{ color: blue !important; }
This code can also work without [style]
markfiend May 28, 2009 at 12:33 am: Stevie D: Thanks for the BRAT link. Will come in very handy! >:-)
Stevie D May 27, 2009 at 9:37 pm: 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!
Stevie D May 27, 2009 at 9:29 pm: 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.
Martin Kliehm May 27, 2009 at 6:01 pm: !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.
Craig Buckler May 27, 2009 at 4:50 pm: 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.
Paurush May 27, 2009 at 2:28 pm: Guys no need to put any [style] tag there, it will work even without that. :)
ryanhellyer May 27, 2009 at 12:04 pm: Jeeze, I can’t believe I didn’t know this already. This could have saved me a lot of work in the past!
Anonymous May 27, 2009 at 10:50 am: Chris Coyier (CSS Tricks) wrote about this exact topic very recently.
@jpstacey May 27, 2009 at 5:05 am: 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.
Tarh May 27, 2009 at 5:02 am: @physio: At least you know the world won’t end tomorrow!
pixel8me May 27, 2009 at 4:32 am: 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.
physio May 27, 2009 at 3:52 am: 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?
BlakeAnthony May 27, 2009 at 2:58 am: inline style that should be blue
Huhhhh? equals red not blue You can also put the RGB colors in
strong { color:#ff0000; }
andré luís May 27, 2009 at 2:22 am: 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. ;)