Using CSS in Email Newsletters

Overview

We get many emails from customers who would like to use CSS in their email newsletters, particular when creating their stationery and templates for MailList King. CSS (Cascading Style Sheets) are widely used when creating web pages and allow improved styling and layout of HTML content. Unfortunately, email isn't the web. Your design may look great in one email client, but chances are it will be different in other email clients.

The cause is the lack of full CSS support in email clients, particularly Gmail which will ignore all external and embedded style sheets (it will support inline styles.) Even Microsoft Outlook 2007 has reduced its support for CSS.

CSS Support in Desktop Email Clients

CSS Support in Web Email Clients

Things to Avoid

Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.
Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.
Don't use tag attributes on the <body> tag (such as widths or background colors). Most email services ignore the <body> tag. You can try putting your whole newsletter inside a <div> and apply inline styles to it. Results may vary.

Things to Do

Use tables for layout. You're can try <div> tags for positioning and layout, but tables are more consistently supported and will give the best result across all email clients.
Use inline styles liberally in tables. In particular you will find inline styles in <td> tags work very well. This is akin to setting up little style regions within each table. Think of these inline styles as miniature style sheets.
Declare width, cellpadding, and cellspacing for all tables and table cells. Doing so will result in a fixed width for the template. This helps because most people will view a newsletter in a preview pane which is much smaller than the width of their monitor. Don't leave widths to chance because many email clients like to "fill in the blank" which can break the design.
Test against Gmail. As Gmail is one the most popular email clients, but the most restrictive in terms of CSS support you should use it first to evaluate the style of your message. Sign up for Gmail and send the message to yourself. If it looks good in Gmail, chances are it will look good in most other clients.
Send to colleagues. This will give you the best chance to catch any problems before your whole mailing list does! Send test messages to a variety of email clients such as Outlook, Hotmail, Yahoo, etc.

Image Tips

Don't use background images. Gmail, among others, will ignore any url() attribute in an inline style, and the simple background= tag attribute. You can use background colors if you wish (bgcolor tag attribute or background-color: css statement).
Don't use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.
Provide alt text for all images. That way the reader will see some content in place of the disabled images. This works particularly well for logos.
Declare both height and width parameters for images. Some email clients will default to "0" for undeclared height or width. Outlook Web Access especially needs this for your table layout to display properly.

Source: Based on ONE/Northwest article, "Guidelines For Using CSS In Email Newsletters"