Comments on: How to Override Inline CSS Styles

By: Ram

Ram — Thu, 11 Jun 2009 07:55:44 +0000

Good one….

How to override the inline style if suppose the inline styles itself having the declaration ‘!important’ Ex:

By: memco

memco — Thu, 04 Jun 2009 15:13:33 +0000

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

By: omnicity

omnicity — Tue, 02 Jun 2009 16:21:11 +0000

@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.

By: http://flexewebs.com/semantix

http://flexewebs.com/semantix — Mon, 01 Jun 2009 23:12:13 +0000

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.

By: Mj

Mj — Fri, 29 May 2009 14:20:37 +0000

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

By: Anonymous

Anonymous — Thu, 28 May 2009 11:08:43 +0000

strong{ color: blue !important; }

This code can also work without [style]

By: markfiend

markfiend — Wed, 27 May 2009 14:33:57 +0000

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

By: Stevie D

Stevie D — Wed, 27 May 2009 11:37:29 +0000

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!

By: Stevie D

Stevie D — Wed, 27 May 2009 11:29:01 +0000

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.

By: Martin Kliehm

Martin Kliehm — Wed, 27 May 2009 08:01:53 +0000
!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.