Safe CSS Styles for HTML Emails

Gmail Screenshot
Recently I have been recreating a lot of html emails. I used to code all my html email with absolutely no CSS styling. Fortunately for us modern email clients are slightly more flexible.

I have been interested in finding a place where I could see all the CSS styles that can be safely used when coding HTML emails. I found this article  http://www.campaignmonitor.com/css/ that tested many of different style attributes across the most popular email clients both online and off. What I really wanted though was a list of every style I could safely use in all my emails regardless of what they will be viewed on. So I have slimmed down their extensive list and created this list of styles that can safely be applied to every email I send. I never really know if the email will be going to a web email client or a desktop client so I had to combine both their lists into one.

While this new list is not perfect I think its a safe place to be when coding.

CSS Styles to use in HTML email

  • background-color
  • border
  • color
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • padding
  • table-layout
  • text-align
  • text-decoration
  • text-indent
  • text-transform

——

Email clients tested

  • Outlook ‘03
  • Outlook ‘07
  • Windows Mail
  • Mac Mail
  • Entourage 2004
  • Entourage 2008
  • Thunder- bird 2
  • AOL 9
  • AOL 10
  • AOL Mac
  • Notes 6 (ignored because it doesn’t like anything)
  • Old Yahoo
  • New Yahoo
  • Old Gmail
  • New Gmail
  • Live Mail
  • Hotmail
  • AOL Web
  • MobileMe

Even with a resource like this I still find ReturnPaths campaign preview tool to be one of the most useful tools ever. I can mail a test to them and they will give me screen shots of what it looks like in many clients both with images on and off. MailChimp also has a tool like this.

I also find MaxBulkMailer to be extremely useful for sending bulk emails to my own test accounts.

  1. Nuruzzaman Sheikh says:

    good list very helpful. thanx

  2. Hello
    I created an online tool to test HTML mail. This tool is very useful to test HTML mail, it uses Premailer to making all your CSS inline and checking your HTML and CSS for compatibiliy with e-mail clients

    Puts Mail – It’s a mail test tool to test your mails before sending them
    http://putsmail.com

    Regards,
    Pablo Cantero

  3. Thank you for cutting to the chase! This list is invaluable.