Tutorials

Latest Word » Tutorials » How to Override Inline Styles with Style Sheet
How to Override Inline Styles with Style Sheet

How to Override Inline Styles with Style Sheet

Tags:

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.

Related Posts

Author Bio

My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

You can learn more about me or Twitter  Follow me on twitter for more updates and resources!

Did You Enjoy This Post?

subscribe  Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.

+ Add Comment11 Peeps Have Spoken Their Minds...

  1. Adam

    ah Thanks, this works well.

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

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

  4. chirag

    hi,

    Thank you very much. share this CSS tips

  5. chirag

    hi soh,

    can you help me it’s not work in IE-7

  6. chirag

    Hai Soh,

    Plz plz plz help me it’s not working in IE7

  7. devdas

    superb…………ill try and ask u question…….bye

  8. simo

    Thanks man!

  9. Mirrorzian

    thanks for that tip

  10. sayitfast

    Need one that works in Google Chrome

  11. Tim Mackey

    It is not entirely true that this does not work in IE6. I think in most cases it will work: http://modxcms.com/about/team/rthrash/css-hacking-important.html
    “A common misconception is that IE6 (and earlier) does not pay attention to !important rules in CSS. The truth is that this is true only part of the time.”

Speak Your Mind...

Post HTMLNeed to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.
Post HTMLNeed to Keep Updated with Comments? Subscribe to comments now.

CSS Gallery