You read that right. I said override inline styles, and no, I have not been drinking. For the longest time it has bugged me that there was no way to override what someone else had done with inline styles. I understand they’re supposed to be the override, and I get why, to a certain extent, but I also think there should be an override to certain overrides when those overrides are abused. Make sense?

Why the need to override them at all?

Mostly it has to do with my own curiosity and the “can it be done” approach with which I come at everything, but I have had a few clients over the years who (bless their hearts) love to get a little creative styling their articles. One will add a bright green paragraph, centered in some font that might as well be comic sans, or another will use an h1 to make the text really big and then style it bold florescent something. All of this, of course, is done within the confines of my nicely styled template I just built for them (and which they paid for).

To be fair, in most of these cases, it’s the CMS doing the dirty work. They’re just clicking a button to make something bigger or more colorful and Wordpress (typically) or another CMS engine is working behind the scenes, adding a span usually, with a style applied. Occasionally, the CMS will add a style to a heading or a paragraph, but in most cases, the following will solve the problem (or prevent the problem):

/* override inline styles */
span[style^=""]{
    color: inherit !important;
    font-size: inherit !important;
}

UPDATE: Stuart and John say a simple [style] will work and include IE7&8 too! - check out the comments for more suggestions and improvements to this solution. Nathan had a good idea for covering all the bases.

/* override inline styles */
span[style]{
    color: inherit !important;
    font-size: inherit !important;
}

Explanation

The first line tells the browser (any browser that’s listening, that is) to look for any span element span with a style attribute [style containing anything ^=""] and then stop and do the following {.

Then, I tell it to inherit the color and font-size from its parent element. The browser (a smart one, mind you) will work backwards up the cascade and find the last styled element with a color or font size applied and use that instead. By declaring it !important I’ve told the browser to ignore anything except this declaration I’ve just made.

Of course, change span to any other element that may have a style to it. For that matter, you could likely control any attribute of any element on the page using this same technique, no?

How this came about?

I have been using this technique on links for a couple of years now. I forget now where I picked it up, but it was originally used to style external links: a[href^="http://"] will allow you to style external links separately so long as your internal links are relative urls.

Then I saw the technique again around the same time, being used by A List Apart to call out the href contents in a print stylesheet (print this page and you’ll see I’ve done this on my site as well):

.storycontent a[href]:after {
    content: “<” attr(href) “>”;
    font-size: 85%;
    text-decoration:none;
}

So today, while I was watching the Chronicles of Narnia (of all things) with the girls, it occurred to me that this could possibly be used to fix my inline style override issue. During a commercial I tried it out and by the end of the commercial I was on my way to this blog post.

Browsers?

Of course, just like the link trick mentioned above, this works in nearly every browser except IE 6 - any IE browser. I’m told IE 7 & 8 will work with the change above.

Good to go

• Safari 3 Mac
• Firefox 1.5 Mac and PC
• Opera 9.5
• IE 7
• IE 8

No dice, no surprise

• IE 6

On the bright side…

This isn’t something that is necessary in every browser anyway, it’s just an extra thing that can come in handy, and I hope you’ll find some (productive) use for it yourselves.

And if this technique happens to offend you or scream in the face of all you hold dear in web standards, please forgive me, I’m a bit of a control freak. :)