Become an email marketing expert

The complete guide for web designers

Resources » CSS support in email clients

CSS support in email clients

Last updated on June 11, 2008

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We've put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.

If you do notice results different to the ones we've listed, we'd love to hear your feedback. Email clients (particularly webmail) often change without notice, so we appreciate your help keeping this resource up to date.

Downloads

Campaign Monitor is email newsletter software for web designers. Proud founders of the Email Standards Project.

 

Desktop Clients

Here's the list of email clients we tested for the 2008 CSS guide. We didn't see any huge improvements across the board this year (there wasn't a whole lot of updating going on) but Entourage 2008 certainly gained some ground. Hopefully it's a sign of things to come from Redmond.

Style Element Outlook '03 Outlook '07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 1		 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6 Eudora
<style> in <head> Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
<style> in <body> Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
Link Element
<style> in <head> Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes No
<style> in <body> Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes No
CSS Selectors
e Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
* Yes No Yes Yes Yes Yes Yes Yes Yes Yes No No No
e.className Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
e#id Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No
e:link Yes Yes Yes Yes Yes Yes Yes Yes No Yes No No No
e:active, e:hover Yes No Yes Yes Yes Yes Yes Yes Yes Yes No No No
e:first-line Yes No Yes Yes Yes Yes Yes Yes Yes Yes No No No
e:first-letter Yes No Yes Yes Yes Yes Yes Yes Yes Yes No No No
e > f No No No Yes Yes Yes Yes Yes No No No No No
e:focus No No No Yes Yes Yes Yes Yes No No No No No
e+f No Yes No Yes No Yes Yes Yes No No No No No
e[foo] No No No Yes No Yes Yes Yes No No No No No
CSS Properties Outlook '03 Outlook '07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 1		 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6 Eudora
background-color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
background-image Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
background-position Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
background-repeat Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
border Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
border-collapse Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No No
border-spacing No No No Yes No Yes Yes Yes Yes No Yes No No
bottom Yes No Yes Yes Yes Yes Yes Yes No Yes Yes No No
caption-side No No No No No No Yes Yes No No No No No
clear Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
clip Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
cursor Yes No Yes Yes No Yes Yes Yes Yes Yes Yes No No
direction Yes No Yes Yes No Yes Yes Yes Yes Yes Yes Yes No
display Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
empty-cells No No No Yes No Yes Yes Yes No No Yes No No
float Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-variant Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
height Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
left Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
line-height Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
list-style-image Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
list-style-position Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
list-style-type Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
margin Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes No No
opacity No No No Yes No Yes Yes Yes Yes Yes Yes No No
overflow Yes No Yes Yes No Yes Yes Yes Yes Yes Yes No No
padding Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
position Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
right Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-indent Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
top Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
vertical-align Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
visibility Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
white-space No Yes No Yes Yes Yes Yes Yes No No Yes No No
width Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
word-spacing Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
z-index Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
  Outlook '03 Outlook '07 Windows Mail Mac Mail Entourage 2004 Entourage 2008 Thunder-
bird 1		 Thunder-
bird 2		 AOL 9 AOL 10 AOL Mac Notes 6 Eudora


Web Clients

Below are the 8 web based email clients we tested this year. We added AOL Web, .Mac and new Gmail. We had high hopes for Gmail to improve on it's rather low standards support but unfortunately, all the new Gmail really did was bring a cleaner user interface. The updated Live Hotmail interface brought some CSS improvements, including support for the <style> and <link> elements in the <head> and <body> tags.

Style Element Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
<style> in <head> Yes Yes No No Yes No Yes Yes
<style> in <body> Yes Yes No No Yes Yes Yes Yes
Link Element
<style> in <head> No Yes No No Yes No Yes Yes
<style> in <body> No Yes No No Yes No Yes Yes
CSS Selectors
e Yes Yes No No Yes Yes Yes Yes
* Yes Yes No No Yes Yes Yes Yes
e.className Yes Yes No No Yes Yes Yes Yes
e#id Yes Yes No No No Yes Yes Yes
e:link Yes Yes No No Yes Yes Yes Yes
e:active, e:hover Yes Yes No No Yes Yes Yes Yes
e:first-line Yes Yes No No Yes Yes Yes Yes
e:first-letter Yes Yes No No Yes Yes Yes Yes
e > f Yes Yes No No No No No Yes
e:focus Yes Yes No No No No Yes Yes
e+f Yes No No No No Yes No No
e[foo] Yes Yes No No No Yes Yes No
CSS Properties Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image Yes Yes No No No Yes Yes Yes
background-position No Yes No No No No Yes Yes
background-repeat Yes Yes No No No Yes Yes Yes
border Yes Yes Yes Yes Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing Yes Yes Yes Yes No No Yes Yes
bottom Yes No No No No Yes Yes Yes
caption-side Yes No Yes Yes Yes No Yes Yes
clear Yes Yes Yes Yes Yes Yes Yes Yes
clip Yes No Yes No No Yes Yes Yes
color Yes Yes Yes Yes Yes Yes Yes Yes
cursor Yes Yes No No Yes Yes Yes Yes
direction Yes Yes Yes No Yes Yes Yes Yes
display Yes Yes Yes Yes Yes Yes Yes Yes
empty-cells Yes Yes Yes Yes Yes No Yes Yes
float Yes Yes No Yes Yes Yes Yes Yes
font-family Yes Yes No No Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
height Yes Yes No Yes Yes Yes Yes Yes
left Yes No No No No Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
list-style-image Yes Yes No No No Yes Yes Yes
list-style-position No Yes Yes Yes Yes No Yes Yes
list-style-type Yes Yes Yes Yes Yes No Yes Yes
margin Yes Yes Yes Yes No No Yes Yes
opacity Yes No No No No No Yes Yes
overflow Yes Yes Yes Yes Yes Yes Yes Yes
padding Yes Yes Yes Yes Yes Yes Yes Yes
position No No No No No No Yes Yes
right Yes No No No No Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
top Yes