How to Override Inline Styles with Style Sheet
Blog » CSS/XHTML » How to Override Inline Styles with Style SheetHow 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.
Related Posts
Tags: css, Dreamweaver, inline styles, Tutorial
This entry was posted on Tuesday, September 16th, 2008 at 9:03 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
