Despite what Kermit will tell you, it is easy being green, at least if you view your emails in Windows Live / Hotmail. We’ve had a few people tell us that a recent update to the webmail client’s stylesheet is forcing all <Hx> heading elements to be this shade of green.

Here’s an example of headings that look a bit more sickly than intended:

Hotmail's green headings

Thanks to James Walters for doing the digging and finding the culprit in within the “thenewcss” stylesheet.

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

Whether that is deliberate or accidental is hard to know, but it has been there for a few weeks now, so it doesn’t look like going away quickly. Fortunately, it is easy enough to work around by adding your own inline !important declaration for your heading elements. Since your CSS will be inline, it takes precedence over the Hotmail stylesheet.

For example:

<h2 style="color:#000 !important;">Your correctly colored heading</h2>

Another email client rendering quirk defeated, at least for now!

  • Jeff Miller

    Mr. James Walters seems to have an update on site that says the !important is actually not the fix. But offers this solution.

  • darren

    Thanks for this James, been bugging me for a while.

  • Dridgett

    Oh that is fantastic. Thanks for that. I got that issue for the first time last week. For some reason my headers and links were going back and forth between

    This couldn’t be diliberate could it? What reasoning could there be behind making all headers green?


    If tested myself this topic. It seems that the affected headers are from h2 to h6, excluded remains h1, which behaves properly.
    I also tested the solution you provided, which has been proven to be the most effective. Nevertheless I wonder wether it wouldn’t be smarter to switch those tags to properly styled divs, which would provably only involve adding font-size and font-weight declarations.

  • Tomteduck

    I fixed it with adding a around the text.

    Headline text

  • David Evans

    This also had me cussing hotmail. I tried to replace my the h2 & h3 I had with styled paras but then of of course hotmail overrode my margins and added their own margins based on my restyled huge text.

    I’ll be using h1s for my headings now until hotmail sorts itself out.

  • Ed

    Adding !important will work… but will have the unwanted effect of making Outlook ignore the declaration (which you guys already noted). Go with James Walters’ second solution and style a span inside the heading.

  • Nickolas Simard

    Thanks for… the Kermit song! Those are always a nice touch to an article! :P
    On a serious note though, thanks for researching the topic for us. I already had applied some fix for that, but this article might help others clear up this issue.

  • Louise

    Could someone give a dummy-answer to this question, please? Once I’m in the index file, I guess this is where I should add something in order for the headings to stay pink (FF1493) and not turn green. But what?

    td.mainbar h2 {
    font-family: Georgia;
    font-size: 20px;
    font-weight: bold;
    color: #FF1493;
    margin: 0 0 10px 0;
    padding: 0;

    Thanks in advance!

  • Alison

    We’ve had a similar issue. Our headings are actually supposed to be green so in this case Hotmail turns them a sickly shade of ORANGE!!

    Not sure if your fix will work but we’ll give it a try.

  • matthew w

    It would be great to have one-stop checklist of little issues like these. Campaign Monitor is great and documenting the details and fixes, but it’s hard to keep track of it all. A checklist would us review and fix templates with total confidence.

  • Wil

    Great catch – I had noticed this during testing and had changed any green headings to paragraph styles to get around it.

  • Ros Hodgekiss

    Hi Dridgett, your guess is as good as mine at this stage. The good folks at Creative Glo (who also wrote an excellent post on the topic) went as far as contacting Hotmail – I would be curious to know the reasoning if they ever do receive a response.

  • Jamy

    Wouldn’t a ‘fallback’ colour property be easiest?
    <h2 style=”color: #ffffff !important; color: #ffffff;”>Example</h2>

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free