How to Override Inline Styles with Style Sheet

Blog » CSS/XHTML » How to Override Inline Styles with Style Sheet

How to Override Inline Styles with Style Sheet

September 16th, 2008

There have been a few incidents when I came across wanting to override some inline styles and I always thought this was an impossible thing to do. The other day I stumbled across this article by Natalie Jost, and she actually came across some similar scenarios and came up with a very clever solution.

For example, lets say the html looked like this:

<div class="block">
	<span style="font-weight: bold; color: red;">Hello World</span>
</div>

You can override the child span by using the following css:

.block span[style]{
    font-weight: normal !important;
    color: #000 !important;
}

Unfortunately the down side of this is technique is that it will not work on IE6 and below, but it does work in IE7, IE8, Fire Fox, Safari, and Opera.

For more detailed explanation of this technique please check out Natalie Jost’s Article.

10 Responses to “How to Override Inline Styles with Style Sheet”

Jan 28th, 2009 @ 6:58 am Adam

ah Thanks, this works well.
Feb 11th, 2009 @ 7:59 am Le Bao Phuc

Hi guy,

I think you missed something in your code.

Back to “!important” mark, it will ensure that properties has it will be apply regardless any same one is set inline.

So, I have new code

.block span {
font-weight: normal !important;
color: #000 !important;
}

and it works well on any browser.
Mar 6th, 2009 @ 7:35 pm Hélio Correia

@Le Bao Phuc,

IE6 doen't support the !important mark. Search for "!important" at http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

The !important mark is the only way I know to override inline CSS.

So, for IE6 and below, we can do:

<!–[if lte IE 6]>
<script>…<script>
<![endif]–>

and pray for a ID attribute on that tag with inline css.
Apr 17th, 2009 @ 8:44 pm chirag

hi,

Thank you very much. share this CSS tips
May 13th, 2009 @ 9:57 pm chirag

hi soh,

can you help me it’s not work in IE-7
May 22nd, 2009 @ 2:10 am chirag

Hai Soh,

Plz plz plz help me it’s not working in IE7
Sep 24th, 2009 @ 1:51 pm devdas

superb…………ill try and ask u question…….bye
Oct 9th, 2009 @ 11:40 am simo

Thanks man!
Nov 13th, 2009 @ 2:02 pm Mirrorzian

thanks for that tip
Dec 21st, 2009 @ 3:33 pm sayitfast

Need one that works in Google Chrome

Speak Your Mind…

Can't find what you're looking for? Don't be afraid to use the search, or simply just ask!

Blog Categories

Latest Blog Posts
CSS / XHTML / jQuery Tutorials
Everything CSS , XHTML & jQuery - Tutorials, tricks, tips and more.
Web Design Articles
All of my deep thoughts, articles, procedures, experiences, insight, and more.
Design Tutorials
Anything from design tips, Photoshop tutorials, and more.
Search Engine Optimization Tips
Search Engine Optimization tips, resources, techniques, and more
Resources & Tools
Fonts, Downloads, Tools, Plug-ins, Add-ons, and more!
Personal Interests & News
All of my personal interests and site updates. Stay up to date with whats happening.

How to Override Inline Styles with Style Sheet