The most important advice that we can give to MailChimp users about CSS in HTML email is not to expect CSS to work perfectly. Keep your code simple, and only use CSS for general elements, like font-formatting or colors.

Tips for Using CSS

Don't place CSS inside the <head> tags in HTML Email.

When HTML emails are viewed in browser-based email applications—like Yahoo, Gmail, or Hotmail—they strip out the <head> and <body> tags by default.

Place your CSS code inline to your content. Any background colors or <body> settings should be handled with a 100% wide <table> wrapper around your email. Use our automatic CSS-inliner feature for additional help.

Your CSS should look something like the below.

Use inline CSS.

Referencing CSS files on your server like the below is not very reliable.

You should use inline CSS instead.

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, like we show below.

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

Test your content.

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 <div> tags and x,y,z positioning don't work reliably. Keep your use of CSS simple, so that if it fails to load properly, people can still read your message.

Was this article helpful?
What can we do to improve your experience with articles like this?
Thanks for submitting your feedback!
At this time, we are unable to reply to any responses, but we'll use this information to keep the site up-to-date.
Sorry, we were unable to submit your feedback. Please try again later. Thank you for your patience.

Related Articles