CSS is Not Your Friend!

Using CSS in an html email template is, unfortunately, a poor idea. Many email clients, particularly Gmail, will overwrite your CSS with their own formatting. While CSS is a great, reliable, efficient tool for designing web pages, remember that an html email template isn't a web page. You'll want to follow these solutions for not using CSS when you design emails

Use a Container Table to Assign a Background Color: Several email clients will completely ignore background color commands in your CSS or even your html <body> tag. However, you can use a container table (a table that "contains" all of the other tables nested within it to create your email layout) to assign a background color. This would be the only instance in a specific email where it's safe to use a percentage to assign your table width and to assign the width within the <table> tag itself. Why is that? Because you're assigning a background color (or image, though that is unadvisable) and you want the table to take up the entire background of the email no matter what size the email displays at. Here's how the code should look.

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
     <td bgcolor="#000000">
      Your email code goes here.
     </td>
</tr>
</table>

That said, as we're about to note, you may want to avoid background colors in your emails.

Avoid Light Fonts on Dark Backgrounds: A dark-colored background with a white or light font may work great on landing pages and web pages. In fact, often a dark background with a bright font can cause products and messages to "pop" effectively. However, when you use this technique in an html email template, you run the risk of a serious break in your email display. Even if you assign the font color and the background color inline and using tables rather than CSS or <body> tags, the variability with which email clients display html can mean that for your subscribers the email may appear as a white background with white text or a dark background with black text. With email templates, it's always safer to err on the side of "somewhat more boring" but most likely to display correctly across all email clients. Sticking to light backgrounds and dark fonts will mean that even if the specific email client overwrites your background or font color with the standard white background and black font, your email is still readable to users.

Use Font Tags Instead of CSS: Gmail strips all CSS from both the <head> and <body> tags. That means that if you're going to use CSS to assign font properties, you'll need to do it by assigning the CSS "inline," which means to assign it on the paragraph or table cell level. However, even then you run consistency risks. While CSS is supported by all major email service providers, it's also an imperfect science in the world of email templates. While it's a bit "old school," using a <font> tag to control your font size, color, decoration, and weight is a more consistent and safe way to ensure your specific email displays as desired across multiple email service providers.




Was this answer helpful?

 Print this Article

Also Read

Best Practices for Creating Effective Cross-Platform Email Templates

It's unlikely that you'll ever be able to create a specific email template that looks exactly the...

Other Cross Email Service Provider Design Issues

While it's nearly impossible to provide a comprehensive list of tricks for ideal display across...

Tables are Your Friend!

Almost all email clients respond well to tables built with html to format your email. In fact,...

Designing Overview

If the world were perfect, your email would look exactly the same whether you opened it in an...

Should You Segment Your List by Email Service Provider?

Some companies will go through the trouble of email list segmentation by email address and...

Powered by WHMCompleteSolution