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

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]

@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:

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.