Anonymous 0

Products like SharePoint include RichText editors that generate code like the following:

<li><font size="2"><span style="color: rgb(95, 95, 95); font-family: tahoma;">Some text here</span></font></li>

I have text-related styling in my main stylesheet. Is there anyway to get it to override the styles applied in the span? My understanding is that these are the last applied styles and that there is little you can do but reformat the HTML.

5 answers

3
points

The only way to do this would be something like:

li font span {
    color: #000 !important;
}

Basically the browser reads the styling applied to the span tag like this:

span {
    color: rgb(95, 95, 95);
    font-family: tahoma;
}

But only applies the styling to that specific span. If you can define greater specificity in your stylesheet, it will overwrite the inline styling. Here it doesn't make sense to wrap another span around the text and overwrite the styling on that one, so the best way to do it is to simply define !important after the style you want to overwrite the inline one with.

Please note that IE6 does not recognize !important. [EDIT: Apparently it does, see Stuart Memo's answer]

Read more about !important

Answered over 7 years ago by Mads Kjaer
2
points

@Mads IE6 does recognize !important, but has a quirk that allows it to be overridden if declared more than once in the same selector. So your code above should work in IE6 just fine.

Bitesizecss has a good example.

Answered over 7 years ago by Stuart Memo
1
point

You can fix this globally with a little Javascript. I like jQuery so here's how to do it there:

$(document).ready(function() {
    var badAttributes = ['style','size','face','color'];
    $.each(badAttributes, function() {
        $('*[' + this + ']').removeAttr(this);
    }
}

You can obviously revise that list as necessary and replace * with a particular tag if you don't want it to be so global.

Answered over 7 years ago by Daniel Ryan
Jonny 0
0
points

@Daniel - I'm using your method (which seems very slick) in a Joomla 1.5 template. I have an extension that loads jQuery 1.4.4 (hosted on Google) in no conflict mode. However, I couldn't get it working until I made a slight modification to the code:

var badAttributes = ['style','size','face','color'];
$(badAttributes).each(function(){
$('*[' + this + ']').removeAttr(this);
});

I just thought I'd post this for anyone who comes looking (like I did).

Answered almost 7 years ago by Jonny
0
points

The key concept to understand behind the answers above (as mentioned) is that of CSS Specificity which is why the span style=" etc type declaration can override other CSS and it becomes common to use !important.

A very good visual resource on this is:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answered over 7 years ago by Liam Clancy (metafeather)