Templates Design your emails in HTML and make it compatible with the main standard email readers. The Guide to CSS, includes small variations among email readers.
We have prepared this guide to save time, with differences among readers of commonly used emails from desktop applications to Web applications, soon we will offer data on the phones.
Style Element | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
<style> in <head> | |||||||
<style> in <body> | |||||||
Link Element | |||||||
<link> in <head> | |||||||
<link> in <body> | |||||||
Selectors | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
e | |||||||
* | |||||||
e.className | |||||||
e#id | |||||||
e:link | |||||||
e:active, e:hover | |||||||
e:first-line | |||||||
e:first-letter | |||||||
e > f | |||||||
e:focus | |||||||
e+f | |||||||
e[foo] | |||||||
Text & Fonts | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
direction | |||||||
font | |||||||
font-family | |||||||
font-style | |||||||
font-variant | |||||||
font-size | |||||||
font-weight | |||||||
letter-spacing | |||||||
line-height | |||||||
text-align | |||||||
text-decoration | |||||||
text-indent | |||||||
text-overflow CSS3 | |||||||
text-shadow CSS3 | |||||||
text-transform | |||||||
white-space | |||||||
word-spacing | |||||||
word-wrap CSS3 | |||||||
vertical-align | |||||||
Color & Background | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
color | |||||||
background | |||||||
-moz-background CSS3 | |||||||
-webkit-background CSS3 | |||||||
background-color | |||||||
background-image | |||||||
background-position | |||||||
background-repeat | |||||||
-khtml-background-size CSS3 | |||||||
-moz-background-size CSS3 |
|||||||
-o-background-size CSS3 | |||||||
-webkit-background-size CSS3 |
|||||||
HSL Colors CSS3 | |||||||
HSLA Colors CSS3 |
|||||||
Opacity CSS3 | |||||||
RGBA Colors CSS3 |
|||||||
Box Model | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
border |
|||||||
-moz-border-color CSS3 | |||||||
-moz-border-image CSS3 | |||||||
-moz-border-radius CSS3 | |||||||
-webkit-border-radius CSS3 | |||||||
-moz-box-shadow CSS3 | |||||||
-moz-box-sizing CSS3 | |||||||
height | |||||||
margin | |||||||
padding | |||||||
width | |||||||
Positioning & Display | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
bottom | |||||||
clear | |||||||
clip | |||||||
cursor | |||||||
display | |||||||
float | |||||||
left | |||||||
opacity | |||||||
outline CSS3 | |||||||
overflow | |||||||
position | |||||||
resize CSS3 | |||||||
right | |||||||
top | |||||||
visibility | |||||||
z-index | |||||||
Lists | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
list-style-image | |||||||
list-style-position | |||||||
list-style-type | |||||||
Tables | Live Hotmail |
Yahoo! |
Outlook 2007/10 |
Apple |
Google Gmail |
Lotus Notes 8.5 |
AOL 10 |
border-collapse | |||||||
border-spacing | |||||||
caption-side | |||||||
empty-cells | |||||||
table-layout |
* Guide for guidance, might undergo changes