Hotmail turns your headings green

By Mathew Patterson on 8th September 2010

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!


  • Dridgett
    8th September

    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?

  • Ros Hodgekiss
    8th September

    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.

    8th September

    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 <hx> tags to properly styled divs, which would provably only involve adding font-size and font-weight declarations.

  • Jeff Miller
    9th September

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

  • darren
    9th September

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

  • Nickolas Simard
    10th September

    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.

  • Ed
    11th September

    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.

  • David Evans
    11th September

    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.

  • Tomteduck
    14th September

    I fixed it with adding a <span > around the text.
    Like: <h ><span >Headline text </span></h2>

  • Wil
    7th October

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

  • matthew w
    7th October

    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.

  • Alison
    8th October

    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.

  • Louise
    8th October

    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!

  • Jamy
    12th October

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

Sign up for free.
Then send campaigns for as little as $9/month

Create an account