The most important advice that we can give to MailChimp users about CSS in HTML email is not to expect CSS to work perfectly. Test, test and test some more. In general, CSS positioning isn't going to work well. Keep things simple, by using CSS for general font-formatting, colors, etc.

Here are some tips:

Don't place CSS inside the HEAD tags in HTML Email.

When you code a web page, you traditionally place the CSS code in between the HEAD tags, above your content. But when HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default.

We recommend that you place your CSS code inline to your content (Note: browser-based email apps also strip out your BODY tag, so any background colors or BODY settings should be handled with a 100% wide TABLE "wrapper" around your email. Or we suggest that you take a look at our Automatic CSS-inliner feature.).

It should look something like this:

 
<span style=" font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">Your content here....</span>

Use inline CSS.

Referencing CSS files on your server like this is not very reliable:

<link href="http://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">

You should use inline CSS (as specified above).

Add a space in front of CSS lines.

We've noticed that some email servers (not MailChimp's, but your recipients') like to strip out any lines that begin with periods (.)

This can ruin your CSS. So, the workaround is to add a space in front of any CSS that begins with a dot, such as:

.title {font-size:22px;}
.subTitle {font-size:15px;}

This is, of course, only needed if you're not able to place CSS code inline to your content.

Test, test and test some more.

We recommend that you test your CSS thoroughly. In general, easy stuff like font styles, sizes, and colors work just fine. But some stuff, like DIVs and x,y,z positioning, don't work reliably at all. Keep your use of CSS simple, so that if it fails to load properly, people can still read your message.

Unfortunately, you just can't rely too much on CSS in HTML email as much as you can with web pages in browsers.


Related Articles