How to Create Great HTML Emails with CSS

How to Create Great HTML Emails with CSS

By Christian MacAuley

HTML emails are widely used for all kinds of professional correspondence. Beyond email newsletters they're used for all sorts of application-generated messages, such as receipts and confirmations. Styled messages have lots of appeal for marketers, designers and consumers -- but for coders, it's a real headache to create them properly.

Creating an HTML email that looks right to every reader is a job that makes cross-browser testing look easy. What can go wrong? After reaching its final destination, an email could be read using any of a number of standalone email clients (such as Outlook, AOL, and Eudora), and even more Web-based clients (Yahoo, Hotmail, and Gmail to name a few). Each of these email clients displays your HTML email message a little bit differently, so ensuring that your message displays correctly can be a daunting task.

How are coders coping with this mess? Some say the only solution is to go retro -- by ditching CSS and using old-school HTML for formatting, but what about serious CSS coders who can't even type a font tag with a straight face? Fortunately, we have options.

Stylesheets that Stick

When you're coding an HTML email with CSS, make sure that you don't use linked CSS files (.css files attached using link or @import). These are the stylesheets most widely ignored by email clients.

CSS style declarations in the head of an HTML document (using style tags) are ignored by some email clients, such as Gmail, so they should be avoided for styles that are key to the email design. I sometimes use a style tag for styles that are "expendable" -- for example, when making all the links green instead of blue isn't crucial, it's a good style to define in a style tag.

The most reliable way to include CSS in an HTML email is to use inline styles. They aren't pretty, but few email clients ignore them. These styles are defined within the HTML tags in the body of the document, like this: <p style="color:green;font-family:sans-serif;">green and arial text</p>. Using span tags to apply inline styles also works well.

Layout Techniques

Most people suggest using table, tr, and td tags for page layout within an HTML email. Tables are the most stable option, especially if you're creating email messages that require a more complicated multi-column layout. Gmail simply removes div tags, and coverage in other clients like Hotmail is spotty. Also, floating div tags don't work in several email clients, so any floating elements can be placed in a table (using <table align="left">, for example).

Using a div tag for a layout or background color is a better option when you're working with a single-column layout. Applying styles to div tags using inline styles versus a style tag will help keep that style in place when the email ships out to the masses.

On the bright side, you can scale back on div tags if they're causing problems, and use the almost universally supported table, tr, and td tags for anything you can't accomplish reliably with a div.

Formatting Text

The best way to make sure your text formatting sticks is to use inline styles, but applying an inline style to every bit of text is tedious and may add too much extra weight to the HTML. If you aren't especially picky about details like the exact pixel size of your text, whether your "black" text shows up dark gray, and how your links are underlined, you'll probably be happier applying text formatting with a style tag rather than inline.

One place where inline styles may make a real difference is in the headings and special notes within your email. When you want to ensure that a certain notice is always red, or that headings are the same shade of orange as your logo, you should use inline styles for that formatting.

Some email clients are notorious for changing text in strange ways that can only only be overridden with inline styles. Hotmail, for example, always displays links in small blue Verdana, regardless of the appearance of the rest of the email. If this is a problem for you, you should use inline styles on each link tag to override it.

Images and Backgrounds

The ability to include images a key advantage to HTML email -- they allow you to show as well as tell, plus they're often used to track email open rates. Like most perks, they have their downfalls. Spammers frequently abuse HTML images, so some email clients don't display them at all without the user's permission. Some email clients display images that are included in an img tag, but not images that are included with CSS, or as a background image, or both.

When creating HTML emails, you should also avoid using dark background colors, especially in the background of your email. If one of your lighter background colors is ignored by an email client for some reason, users may see the email as black text on a dark blue background and ignore the message or, even worse, report it as spam.

General Do's and Don't's for HTML/CSS Emails

To wrap up, here are some do's and don't's:

Do ...

• Use inline style declarations for the most important styles.
• Declare styles in a style tag when they're not absolutely necessary.
• Use table tags for multi-column layouts and floating elements.
• Test your email in multiple standalone and Web-based email clients.

Don't ...

• Use external stylesheets.
• Use floating div tags for multi-column layouts.
• Expect CSS background images to show up in most email clients.
• Rely on images showing up, especially background images.

About the Author

Christian MacAuley is a freelance Web specialist in the Washington, DC area. She also teaches Web design, develops Web education coursework, and is the author of two computer books. You can learn more about her and her work at her personal website, https://www.xiann.com.

Created: March 27, 2003
Revised: December 6, 2006

URL: https://webreference.com/programming/css_html/1