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.

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).