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.
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. ;)
May 27th, 2009 at 2:22 am
inline style that should be blue Huhhhh? equals red not blue You can also put the RGB colors in strong { color:#ff0000; }May 27th, 2009 at 2:58 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?
May 27th, 2009 at 3:52 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.
May 27th, 2009 at 4:32 am
@physio: At least you know the world won’t end tomorrow!
May 27th, 2009 at 5:02 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.May 27th, 2009 at 5:05 am
Chris Coyier (CSS Tricks) wrote about this exact topic very recently.
May 27th, 2009 at 10:50 am
Jeeze, I can’t believe I didn’t know this already. This could have saved me a lot of work in the past!
May 27th, 2009 at 12:04 pm
Guys no need to put any [style] tag there, it will work even without that. :)
May 27th, 2009 at 2:28 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.
May 27th, 2009 at 4:50 pm
!importantis 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!importantdeclaration will override his preferences and make the text illegible.May 27th, 2009 at 6:01 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.
May 27th, 2009 at 9:29 pm
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!May 27th, 2009 at 9:37 pm
Stevie D: Thanks for the BRAT link. Will come in very handy! >:-)
May 28th, 2009 at 12:33 am
strong{ color: blue !important; }
This code can also work without [style]
May 28th, 2009 at 9:08 pm
My boss said refrain from using inline styles… its better to separate css.
May 30th, 2009 at 12:20 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.
June 2nd, 2009 at 9:12 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.
June 3rd, 2009 at 2:21 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
June 5th, 2009 at 1:13 am
Good one….
How to override the inline style if suppose the inline styles itself having the declaration ‘!important’ Ex: <strong style=”color: red !important;”>
June 11th, 2009 at 5:55 pm