CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail

As of April 2005

HTML emails are the subject of many discussions. This article doesn't discuss about weither or not HTML messages have their place in our mailboxes, but about a problem web developers face when creating HTML emails: the email client support of CSS. This article will concentrate on the support offered by three important web based mail clients: Hotmail, Yahoo! Mail and Gmail.

Desktop mail clients have always been the cause of major headaches because of their lack of support for cascading style sheets which resulted in many (to heavy) HTML emails conceived like 1999 web pages: with lots of unnecessary <table> and <font> elements.

This problem is, theoretically, corrected with web based mail clients since the user sees his email through his browser, which, if modern, has an almost complete CSS support. But it's not that simple. CSS has the power to completely change the design of the page in which it is included, so, simple CSS rules in an email opened in Hotmail could easily drastically change Hotmail's interface. This could allow not well formed CSS rules in an email to disfigure the interface, or, worst, it could be used by ill-intentioned persons to mislead the user (spamming, phishing). So, to prevent those situations, web based clients "read" the email before it's showed and removes any CSS rule it considers a danger. The problem is that unwanted properties and CSS control rules differ from one client to the other.

I tested the vast majority of CSS properties and some CSS practices to see how each web based client would react. You will find the results below. When I thought precision was needed, I added additional information (the "Explanations" section).

Notes

Except in some specific situations, all CSS properties have been tested independently (one property at a time) on a <div>, <p> or <span> element with the style attribute. Example:

<div style="color:#990000;">content</div>

It is possible that each email client has specific logic when specific combinations of styles and/or structure happen or with different browsers and/or OS's, which may result in differences with what is said here.
The tests have been made in the standard Yahoo! Mail, Gmail and Hotmail interface with Firefox on Windows XP.

Other useful links

Table of content

General overview: Draws a general portrait of each client and its caracteristics.
The <style> element: Support for the <style> element.
The <link> element: Support for the <link> element.
Selectors: List the majority of the selectors and each client support.
Properties: List the majority of the properties and each client support.
Others: List other CSS related elements and each client support.
Explanations: Detailed explanations for some elements of the previous sections.

General overview

The three clients don't have a DTD declaration in the page that will display your email, so browsers will probably render it in quirks mode. If you want to prevent any surprise, omit the DTD declaration when creating your email (but remember that any (X)HTML document should always have a DTD declaration).

Following is a general overview of each web based email client tested:

Gmail

Keeps only the HTML between the <body> and </body> tags. Discards the rest.
Removes any <style> element and its content, even if it's within the <body> element.
Removes any <link> element.
The font size is bigger in <table> elements, so you'll probably have to force it with: <table style="font-size:/*your size*/;"></table>

Hotmail

Keeps only the HTML between the <body> and </body> tags. Discards the rest.
The <style> element and its content is preserved if it's inside the <body> element.
Removes any <link> element.

Yahoo! Mail

Keeps almost intact the complete original HTML sent and puts it directly in a <div>. So if you had any of these in the HTML, they will be found in the middle of the Yahoo! Mail HTML: DTD declaration, comments, <html>, <head>, <title>, <style> and <body> elements, etc. But, the DTD declaration won't be taken in consideration by the browser since it's in the middle of the page, same thing for the <title> element;
Will rename the <body>, <meta> and <link> tags <xbody>, <xmeta> and <xlink>, so they will be "disabled". This means that no external stylesheet can be linked to the document through the <link> element.

The <style> element

Description	Gmail	Hotmail	Yahoo! Mail
`<style>` element in the `<head>`	No	No	Yes, but...
`<style>` element in the `<body>`	No	Yes, but...	Yes, but...

The <link> element

Description	Gmail	Hotmail	Yahoo! Mail
`<link>` element in the `<head>`	No	No	No
`<link>` element in the `<body>`	No	No	No

Selectors

CSS selector	Gmail	Hotmail	Yahoo! Mail
*	untestable	Yes	Yes, but...
e	untestable	Yes	Yes, but...
e > f	untestable	No	Yes, but...
e:link	untestable	Yes	Yes, but...
e:active, e:hover	untestable	Yes	Yes, but...
e:focus	untestable	No	Yes, but...
e:lang©	untestable	No	Yes, but...
e+f	untestable	Yes	Yes, but...
e[foo]	untestable	Yes	Yes, but...
e.className	untestable	Yes	Yes, but...
e#id	untestable	Yes	Yes, but...
e:first-line	untestable	Yes	Yes, but...
e:first-letter	untestable	Yes	Yes, but...

Properties

CSS property	Gmail	Hotmail	Yahoo! Mail
background-color	Yes	Yes	Yes
background-image	No	Yes, but...	Yes
background-position	No	No	No
background-repeat	No	Yes	Yes
border	Yes	Yes	Yes
border-collapse	Yes	Yes	Yes
border-spacing	Yes	No	Yes
bottom	No	Yes	Yes
caption-side	Yes	No	Yes
clear	No	Yes	Yes
clip	No	Yes, but...	Yes, but...
color	Yes	Yes	Yes
cursor	No	Yes	Yes
direction	Yes	Yes	Yes
display	No	Yes	Yes
empty-cells	Yes	No	Yes
filter	No	No	Yes
float	No	Yes	Yes
font-family	No	Yes	Yes
font-size	Yes	Yes	Yes
font-style	Yes	Yes	Yes
font-variant	Yes	Yes	Yes
font-weight	Yes	Yes	Yes
height	No	Yes	Yes
left	No	Yes	Yes
letter-spacing	Yes	Yes	Yes
line-height	Yes	Yes	Yes
list-style-image	No	Yes, but...	Yes
list-style-position	Yes	No	No
list-style-type	Yes	Yes	Yes
margin	Yes	No	Yes
opacity	No	No	Yes
overflow	Yes	Yes	Yes
padding	Yes	Yes	Yes
position	No	No	No
right	No	Yes	Yes
table-layout	Yes	Yes	Yes
text-align	Yes	Yes	Yes
text-decoration	Yes	Yes	Yes
text-indent	Yes	Yes	Yes
text-transform	Yes	Yes	Yes
top	No	Yes	Yes
vertical-align	Yes	Yes	Yes
visibility	No	Yes	Yes
white-space	Yes	Yes	Yes
width	Yes	Yes	Yes
word-spacing	Yes	Yes	Yes
z-index	No	Yes	Yes

Others

Description	Gmail	Hotmail	Yahoo! Mail
@import	untestable	No	No
IE Mac hack	No	No	Yes
javascript in url()	No	No	No
url()	No	No	Yes
Inline comments	No	No	Yes

Explanations

Example:

<html>

      <head>

        <style type="text/css" media="screen">

          /* Css declarations */ 

        </style> 

    
      </head>

      <body>

        <!– HTML –>

      </body>

    </html>

Gmail

No. Gmail strips everything outside the <body> element and removes any <style> element.

Hotmail

Yahoo! Mail

Yes, but... The browser must be able to support a <style> declaration in a <head> element in the middle of the Yahoo! Mail <body> element. Also, every CSS declarations will be preceded by #message , except for body which will be replaced by #message ("message" being the id value of the <div> element surounding the email's content).
So the following CSS declaration

body{ background-color:#990000; }

    p{ font-style:italic; }

    div#content{ margin:2em; }

    .className{ color:#ffffff; }

will become

#message{ background-color:#990000; }

    #message p{ font-style:italic; }

    #message div#content{ margin:2em; }

    
    #message .className{ color:#ffffff; }

Be careful with this method, because when replying or forwading this message, Yahoo! Mail will convert your style definition as plain text and your declarations will appear in the message.

Example:

<html>

    <body>

    
      <style type="text/css" media="screen">

        /* Css declarations */ 

      </style>

      <!– HTML –>

    </body>

    </html>

Gmail

Hotmail

Yes, but... Hotmail removes the <style> element's attributes, converts all CSS comments found in the <style> element to "Javascript like" comments, restructure CSS declarations on two lines and converts > to >, so the following code

<style type="text/css" media="screen">

      /* CSS comment */

      div.className{ color:#ffffff; }

      p>code{ font-weight:bold; }

    </style>

will become

<style>

    
    // CSS comment

    div.className

    { color:#ffffff; }

    p&gt;code

    { font-weight:bold; }

    </style>

I have not checked if this style sheet is valid, but, to be sure, don't use CSS comments and the child selector (>). A CSS rule on two lines is valid.

Yahoo! Mail

Example:

<html>

      <head>

        <link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" /> 

    
      </head>

      <body>

        <!– HTML –>

      </body>

    </html>

Gmail

Hotmail

Yahoo! Mail

No. Yahoo! Mail renames <link> elements <xlink>, thus disabling the <link> action.

Example:

<html>

      <body>

        <link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" />

    
        <!– HTML –>

      </body>

    </html>

Gmail

Hotmail

Yahoo! Mail

No. Yahoo! Mail renames <link> elements <xlink>, thus disabling the <link> action.

Xavier Frenette.com

CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail

Table of content

General overview

Gmail

Hotmail

Yahoo! Mail

The <style> element

The <link> element

Selectors

Properties

Others

Explanations

<style> element in the <head>

Gmail

Hotmail

Yahoo! Mail

<style> element in the <body>

Gmail

Hotmail

Yahoo! Mail

<link> element in the <head>

Gmail

Hotmail

Yahoo! Mail

<link> element in the <body>

Gmail

Hotmail

Yahoo! Mail

Selectors and properties explanations

Gmail

Hotmail

Yahoo! Mail