CSS in HTML Email
CSS (Cascading Style Sheets) is nice for websites, but don’t relay too much in it with HTML email. For instance, you shouldn’t expect DIVs to work. And definitely avoid CSS positioning – it won’t work. Use old-fashioned <TABLES> tags for your layouts in HTML email, and only use CSS for simple font formatting and colors. Always design your email so that it looks decently if someone removes your CSS. Before you send your HTML email, delete the CSS and see how it displays.
CSS is especially a touchy situation if you’re using a WYSIWYG to design your HTML email, because WYSIWYGs insert all kinds of crazy CSS and DIVs by default. It’s one of the drawbacks of WYSIWYGs for HTML email. It may help you get things coded, but you still have to understand HTML enough to go back and remove some of the code, so things won’t break in email applications.
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 stylesheets are 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.
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 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.
Emails with CSS
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.
