How to Override Inline Styles with Style Sheet

How to Override Inline Styles with Style Sheet

How to Override Inline Styles with Style Sheet

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>