Use the CSS Inliner
Mailchimp's CSS Inliner converts pasted styling into inline CSS, saving you time. Learn how to turn on the CSS Inliner and the CSS selectors we support.
Get the job done with a pro
From training to full-service marketing, our community of partners can help you make things happen.
CSS in HTML Email
Copy Article URL
Copied
Note
The information in this article applies to the classic builder only. To learn how to use the new builder, check out Design an Email with the New Builder.
CSS will work in HTML email but it has limitations. In general, very simple CSS is always best when you code for email.
These are our recommendations for how to use CSS in HTML email and some information to help you troubleshoot CSS-related issues.
General CSS tips and troubleshooting
These are a few general pointers to help you get the best results when you code CSS for your campaigns. Remember that while CSS will work with HTML email, it has a higher level of unpredictability.
- Keep your code simple.
Coding for HTML email is different from coding for a website. The simpler the code, the less room for error. - Only use CSS for general style elements.
You'll get the best results if you use CSS for general elements like fonts or colors. - Use inline CSS
Because browser-based email applications, such as Gmail, strip out<head>and<body>tags by default, always use inline CSS over embedded CSS.
Inline your embedded CSS
We strongly recommend that you take advantage of our CSS Inliner tool to help you automatically inline your embedded CSS.
If you choose to manually inline your CSS, any background colors or <body> settings should be handled with a 100% wide <table> wrapper around your email.
Your CSS should look something like the following example.
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">
your content here....
</span>
Note
Occasionally, a subscriber's email service will strip out lines of code that begins with periods, which can ruin your CSS. If you're manually inlining your CSS, add a space in front of any line that begins with a period or dot.
Technical Support
Have a question?
Paid users can log in to access email and chat support.
Related
Limitations of HTML Email
Coding an HTML email isn't much different from coding a website was back in the late '90s. Learn about the limits of email and how to work around them.