Home Categories HTML CSS Tutorial

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

3.6/5.0 (11 votes total)
Rate:

Xavier Frenette
July 20, 2006


Xavier Frenette
Xavier Frenette lives in Montréal and is currently a web developer at My Virtual Model.


http://www.xavierfrenette.com
Xavier Frenette has written 1 articles for WebKnowHow.
View all articles by Xavier Frenette...

HTML emails are the subject of many discussions. This article doesn't discuss about whether 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). I will try to update this page from time to time to complete the lists. Please leave a comment or contact me if you want to make any changes.

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. Please inform me in that case.

  • The tests have been made in the standard Yahoo! Mail, Gmail and Hotmail interface with Firefox on Windows XP.

Other useful links

  • A Guide to CSS Support in Email (http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.html)
  • How To Code HTML Email Newsletters (All New Version) (http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php)
  • CSS and Email, Kissing in a Tree: A List Apart (http://www.alistapart.com/articles/cssemail/)

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 (http://en.wikipedia.org/wiki/DTD) declaration in the page that will display your email, so browsers will probably render it in quirks mode (http://www.quirksmode.org/index.html?/css/quirksmode.html). 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 content --></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

<style> element in the <head>

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

No. Hotmail strips everything outside the <body> element.

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.

<style> element in the <body>

Example:

<html>
<body>
  <style type="text/css" media="screen">
    /* Css declarations */
  </style>
  <!– HTML –>
</body>
</html>

Gmail

No. Gmail removes any <style> element

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 &gt;, 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

Yes, but... The rules are the same as if the <style> element was in the <head> element except for the location of the <style> element,

<link> element in the <head>

Example:

<html>
  <head>
    <link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <!– HTML –>
  </body>
</html>

Gmail

No. Gmail removes any <link> element.

Hotmail

No. Hotmail removes any <link> element.

Yahoo! Mail

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

<link> element in the <body>

Example:

<html>
  <body>
    <link href="http://path.to/stylesheet.css" type="text/css" rel="stylesheet" />
    <!– HTML –>
  </body>
</html>

Be aware that the W3C specification about the <link> element specifies that <link> may only appear in the <head> element.

Gmail

No. Gmail removes any <link> element.

Hotmail

No. Hotmail removes any <link> element.

Yahoo! Mail

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

Selectors and properties explanations

Gmail

Hotmail

Yahoo! Mail


Add commentAdd comment (Comments: 1)  
Title: Excellent October 26, 2006
Comment by Kevin

This is a very good article, thank you for taking the time to compile this info.

Advertisement

Partners

Related Resources

Other Resources