CSS Support Guide for HTML Emails

September 1st, 2009 by Supriya Agnihotri Jagani § 6

The sole intent of my article is to demonstrate how one can use standards-based markup for HTML emails. Like it or not, HTML emails are here to stay. So, For those of you who are ready to improve the markup of your HTML emails, here is a quick compatability guide to HTML tags & CSS Properties for different web-based & PC based email environments.

HTML Tags PC based email environments Web-based email environments
  Outlook 2003/OE Gmail Yahoo Mail Windows Live Mail Hotmail
<style> element in the <head> yes no yes yes no
<style> element in the <body> yes no yes yes yes
<link> element in the <head> yes no no no no
<link> element in the <body> yes no no no no
           
CSS Properties          
background-color yes yes yes yes yes
background-image yes no yes no yes
background-position yes no no no no
background-repeat yes no yes no yes
border yes yes yes yes yes
border-collapse yes yes yes yes yes
border-spacing no yes yes no no
bottom yes no yes no yes
color yes yes yes yes yes
cursor yes no yes yes yes
display yes no yes yes yes
float yes no yes yes yes
font-family yes no yes yes yes
font-size yes yes yes yes yes
font-style yes yes yes yes yes
font-weight yes yes yes yes yes
height yes no yes yes yes
left yes no yes no yes
letter-spacing yes yes yes yes yes
line-height yes yes yes yes yes
list-style-image yes no yes no yes
list-style-position yes yes no yes no
list-style-type yes yes yes yes no
margin yes yes yes no no
opacity no no yes yes no
overflow yes yes yes yes yes
padding yes yes yes yes yes
position yes no no no no
right yes no yes no yes
text-align yes yes yes yes yes
text-decoration yes yes yes yes yes
text-indent yes yes yes yes yes
text-transform yes yes yes yes yes
top yes no yes no yes
vertical-align yes yes yes yes yes
visibility yes no yes yes yes
width yes yes yes yes yes
word-spacing yes yes yes yes yes
z-index yes no yes no yes

Concluding Words..

HTML emails that contain semantic markup and CSS gel very well with the most commonly used email clients. And for clients that offer poor or no support, the semantic markup allows for graceful degradation.
And, for all those who really do not want to handle the long list mentioned above, you always have these words to mention above your email “Having trouble reading this email? Click here to View it in your browser.” ;)

Tagged: , , , ,

§ 6 Responses to “CSS Support Guide for HTML Emails”

What's this?

You are currently reading CSS Support Guide for HTML Emails at Digicorp.

meta

  • Author: Supriya Agnihotri Jagani
  • Comments: 6 Comments
  • Categories: design

Share