Override Inline Styles from the Stylesheet

Written on May 3, 2008 // Design 38 Comments

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


Natalie Jost
Share Tweet me (but don't mistweet me)

Copyright © 2008 – 2010 Natalie Jost

Tags: , ,

Home Print Comments

I gave up Amazon.com for BN Top 100 Bestsellers: Save up to 30%

38 Comments

  1. Josh H. May 5, 2008 | 2:17pm

    I wonder if using some unobtrusive javascript from jQuery could overcome the browser issue (Just thinking out loud, mind you). Perhaps just search for all the spans with style=”" and strip them out? Of course they may have other styles associated with the span so maybe not. Either way good tip!


  2. Natalie May 5, 2008 | 4:22pm

    Hey Josh that would work, I’m sure, though you’re right about it limiting all inline styles and that’s taking it too far even for me. ;) That’s what I love about the cascade and the inherit value. You don’t have to strip the inline styles of style completely and you don’t have to specify anything at all. In my experimentation I started out trying to specify the color and font-size of these spans but in a “duh” moment I remembered the inherit value which would just grab the color/size from its parent, so much nicer.

    Thanks for the comment – it’s good to think about these things.


  3. christa May 6, 2008 | 5:23am

    I have absolutely no idea what this post is about, but I’m so intrigued by the language. That you can have these conversations and they are as clear to you as 2+2=4 is to me, well, I’m amazed.


  4. Stuart W May 8, 2008 | 1:49pm

    Would this be sufficient for the selector?

    span[style]


  5. Natalie May 8, 2008 | 2:02pm

    Stuart thanks, that would make sense, but I don’t know if it would work because I didn’t try it. Why don’t you and let us know. It seems logical enough.


  6. John Lascurettes May 8, 2008 | 2:47pm

    To echo what Stuart said: span[style] should be all you need and it will support IE7 and 8.

    That said, I can’t tell you how many times I run into “!important” in inline styles and those cannot be overwritten.


  7. Natalie May 8, 2008 | 7:41pm

    Thanks, John, I’m glad to hear that solution works — and solves part of the IE issue. Although, it’s strange they would go to the trouble to get [style] to work and not expand it to include specific styles.


  8. Sean May 8, 2008 | 8:17pm

    Most text editors in a CMS have the ability to filter tags. Set it up so that span tags are removed, and you should be good to go.


  9. Nathan Smith May 8, 2008 | 8:37pm

    I wonder if that could be written with a greater level of descendency, to heavy-handedly override all inline styles…

    html body *[style] { … !important; }

    Anyway, haven’t tested it, just thinking aloud.


  10. John Lascurettes May 8, 2008 | 8:57pm

    The reason why you’d want to do a simple attribute selector of span[style] instead of one of the advanced attribute selectors is that you don’t know in what order and what other CSS properties will be in that span. For example:

    span[style^=foo] would match a span with style="foo bar" but would not match style="bar foo"

    And in your case, since you were doing span[style^=""] you were asking for (to put it in natural language) “a span with a style attribute that starts with [blank].” I say “blank” because you had two double quotes. IE was probably seeing that as “a span with a style attribute that starts with a double-quote.” You essentially were just simply trying to say, “a span with a style attribute.” That’s the syntax Stuart gave.

    If you want a little more schooling on attribute selectors, see these:


  11. Daniel Marino May 9, 2008 | 7:25am

    It’s funny because I recently wrote a journal entry about how I hate it when CMS’s allow users to markup their articles using inline styles (or invalid/depreciated tags). Now I can finally put a stop to my client’s ruining their websites! Thanks for the great tip!


  12. Natalie May 9, 2008 | 7:25am

    Nathan I wondered that last night but don’t know when I’ll have time to try it. It was a fluke I had the 5 minutes to escape to get as far as I did! :) It would make sense not to have to do this for every element that could have a style attached, but for now dealing with spans is enough for me just because I’m mostly dealing with CMS’ that put styles on spans before anything else. Although I saw some code recently in a consulting job – this was for some text she wanted to highlight, but not really semantically in any hierarchy:

    <h1 style="text-align:center; color: #0000ff;">

    Of course, using Eric Meyer’s reset made the size normal on the h1, but then it was bright blue right in the middle and looked really strange against the color scheme. I left the text-align, but was able to make the color match the text around it.

    If I can get some time I’ll try it, but if you do, please do email me or come back here and let me know. That seems like it would be the best solution to me.


  13. Natalie May 9, 2008 | 7:30am

    Hey, Sean, thanks for that, I didn’t know about the option to strip tags, though I can’t think of anywhere in Wordpress specifically that allows that. I’ll have to look into it sometime.

    The trouble I see in stripping tags though is in cases where:

    1. Span tags might be necessary.
    2. The ugliness is applied to a non-span element.
    3. In many cases, CMS’ add style="text-align:center" to something and for the end user there’s no better way to center something.

    I’d much rather see that than <center> tags.

    So I want to leave spans in, and I want to leave them able to be styled. I just want to be able to decide which properties will be inherited on which elements.


  14. Natalie May 9, 2008 | 7:38am

    Thanks again, John for more clarification. I appreciate you taking the time to expand on this for us. Everything you said makes sense and had I not been doing this during a commercial in a movie, I might have come up with better. And I absolutely want more schooling… always! :)


  15. links for 2008-05-10 « tscpannex May 9, 2008 | 6:49pm

    [...] Standards for Life by Natalie Jost » Override Inline Styles from the Stylesheet Override Inline Styles from the Stylesheet (tags: CSS hacks) [...]


  17. Richard Morton - QM Consulting Ltd May 13, 2008 | 7:39am

    Interesting, the battles between developers and the CMS. The answer is obviously for the two to work together in some way (but that is probably just cloud cuckoo land). Some CMSs are more standards compliant than others and will avoid using deprecated elements and attributes, but even if they do, there is still scope for overriding styles. Do you use this code for elements other than span as well, or do you find that just isn’t necessary?


  18. Parrfolio May 13, 2008 | 9:16am

    This is a big pet peeve of mine when using .NET controls. Form validation controls in .NET produce nasty inline styles for required fields. Example:

    <span style="color:Red;display:none;">Required</span>

    So I have been using this declaration to make them somewhat less nasty but still never could overwrite these inline styles.

    span[style*="Red"] {
    font-size:1.2em;
    margin-left:5px;
}

    I never thought of using inheritance. This is great! I added this to my reset style sheet but changed the span to a universal selector.

    *[style]{
    color: inherit !important;
    font-size: inherit !important;
}</p>

    Nice job! Thanks for sharing.


  19. Natalie May 13, 2008 | 9:24am

    Richard, I have used this on h1-h6 in some cases where a particular user has a habit of using them to enlarge text-size because in many cases the user is also adding a color or other style to the “larger” text.

    Parrfolio, thanks for sharing that. There was other discussion about using *[style] but I still haven’t been able to test it so I’m glad to hear it has worked for you.


  20. John Faulds May 14, 2008 | 5:19am

    Aren’t most WYSIWYG editors that come with CMSs configurable enough that you can remove the ability to add your own colours? I’m mainly thinking about TinyMCE here because that’s the one I deal with most often – you can control exactly what buttons appear. If you remove the ability to add horrendous colours you’re just left with them using hx tags to make certain text larger.

    I don’t know that there’s a way around that as I think the user needs to have the ability to create headings in their content. You just need to try your best to educate them I guess.

    I don’t think I’d feel comfortable with an override that targetted all spans as I use them quite a lot for other styling purposes.


  21. Natalie May 14, 2008 | 6:01am

    Hi John, that’s a good point, and we’ve talked about that. Someone mentioned covering all styles on spans but I prefer to only force inline styles to inherit. I’m not sure I know of a way – in Wordpress – to change anything other than whether or not the WYSIWYG is on or off, and whether WP will correct some invalid markup. Inline styles are still valid, so WP doesn’t have a way to turn those off (that I’m aware of).

    And you’re right, I don’t feel comfortable overriding all spans either because I use them occasionally too, but I never use inline styles if I can help it, and in many cases, the client does, so that I want to fix.

    Likewise, I don’t want to disallow all inline styles either. As I mentioned the centering aspect before, there are some inline styles that have no other option. The WP WYSIWYG has come a long way, adding alignleft et al. to images now instead of inline styles telling them to float. But so far they haven’t changed the inline text-align to a center class on paragraphs.


  22. David May 19, 2008 | 3:58am

    The problem with IE is not whether to use [style] or not. It’s the annoying inherit bug that makes it really difficult to “disable” inline styles in IE.

    Sure, you can override them as explained here, but you can’t put the properties back into the natural cascade using the inherit value.


  23. LautundKlar Webdesign Blog » Inline CSS überschreiben May 26, 2008 | 4:15am

    [...] Wie man Inline CSS Definitionen überschreiben kann [...]


  24. links for 2008-06-04 :: User First Web June 4, 2008 | 3:35am

    [...] Standards for Life by Natalie Jost » Override Inline Styles from the Stylesheet (tags: inlinestyles css hacks design) [...]


  25. Sunday Weekly Roundup #22 - 06/08/2008 » Blog at veanndesign.com June 8, 2008 | 7:46pm

    [...] Override Inline styles from the Stylesheet [...]


  26. Pankaj Singh June 18, 2008 | 4:15am

    Hi,

    Everybody is saying here it will work in IE7 & IE8 as well. but i don’t know whats goes wrong in my case. it’s working on Firefox and Opera but not in any IEs .

    Can any body suggest!!!


  27. Noteworthy, late June edition — flow14, the blog June 18, 2008 | 10:23pm

    [...] of internet trickery, I stumbled on a CSS hack I’ve never seen before: Overriding Inline Styles from a CSS file – useful if your CMS-using clients get too crazy with the WYSIWYG text editor and destroy your [...]


  28. Patrick Haney June 25, 2008 | 11:58pm

    Great post, Natalie. I can’t believe no one else has pointed this out (or at least not that I know of). With more and more browsers supporting these types of selectors, I think we’re going discover a lot more useful tricks like these.


  29. Freshleaf Blog » Web Design Toolbox .. or Library.. or something (a web designers reference) - corporate website design July 25, 2008 | 11:09am

    [...] A text area which expands to fit the text entered. Override Inline Styles for the Stylesheet : http://www.standardsforlife.com/override-inline-styles-from-the-stylesheet/ I haven’t tried this one so I can’t vouch for it, but definitely worth checking out if you do [...]


  30. Diagnosticar problemas de accesibilidad utilizando una CSS de usuario | Uninstallme July 26, 2008 | 9:40am

    [...] después, vi otra técnica para sobrescribir las declaraciones de estilos en línea. Esta técnica tiene el “pequeño inconveniente” de no funcionar en Explorer, aunque no [...]


  31. Looking. Again. at The Opposite of Breaking August 21, 2008 | 3:43am

    [...] help me feel better but tonight it’s not working. I need a job yesterday. Then I read things like this and I start to feel competent and useful again because a) I understand it and can’t wait for [...]


  32. Websites You Shouldn´’t Have Missed in August August 31, 2008 | 3:09pm

    [...] – Override Inline Styles from the Stylesheet [...]


  33. Links of Interest - CSS-Tricks September 2, 2008 | 8:45am

    [...] this since clearly inline styles are usually the ones doing the overriding, but it is possible to override inline styles from the stylesheet. The theory is that you use the attribute selector, and simply something like span[style] { color: [...]


  34. This month in bookmarks: August 2008 September 2, 2008 | 10:15pm

    [...] Override Inline Styles from the Stylesheet [Standards for Life] – Natalie Jost came up with a brilliant way to override inline styles from a stylesheet for IE7+, Firefox, Opera, and Safari. You’ll definitely want to save this technique for later. I wonder if this will work for Google Chrome… [...]


  35. Websites You Shouldn’t Have Missed in August 2008 September 4, 2008 | 1:46pm

    [...] – Override Inline Styles from the Stylesheet [...]


  36. Links of Interest | Proba September 5, 2008 | 7:11pm

    [...] this since clearly inline styles are usually the ones doing the overriding, but it is possible to override inline styles from the stylesheet. The theory is that you use the attribute selector, and simply something like span[style] { color: [...]


  37. Liz Luxenberg September 29, 2008 | 1:30pm

    It didn’t work for me in IE7, but it worked in FF, Safari, etc. Has anyone else run into this? I used this in the css:

    span[style^=""]{ color: inherit !important; }

    and this is the code:

    Thanks! -Liz


  38. Natalie September 29, 2008 | 3:43pm

    Hi Liz, I recommend reading the comments to this post. Although my original idea worked for me at the time, other better ideas were brought up in the comments. This is how I do it now and it works for me every time:

    * [style] { or more specific cases #this-block * [style] {