To get the best results when you work with CSS in HTML email, keep your code simple and inline your CSS. Mailchimp's Automatic CSS Inliner tool converts styles from your pasted code to inline and saves you from coding it by hand.
In this article, you'll learn how to turn on the Automatic CSS Inliner in a Code Your Own template and which selectors are supported.
Turn on the Inliner
To turn on the CSS inliner, follow these steps.
In the Content section of the campaign builder, click Design Email.
On the template step, click the Code Your Own tab and select Paste in code.
On the design step, paste in your HTML code.
Click the Settings tab.
Check the box next to Automatic CSS Inliner.
Selectors supported by the CSS Inliner
The Automatic CSS Inliner allows you to include sophisticated CSS styling in your HTML email, including attributes, pseudo-classes, descendants, and more. These are the selectors supported by the Inliner.
tagname
class
has attribute
attribute value equals
attribute value is one of
attribute value contains
attribute hyphen value
attribute value begins with
attribute value ends with
pseudo-classes first-child
last-child
only-child
empty
not
nth-child
child
descendant
sibling
After you've turned on the Inliner and the rest of your code is ready to go, continue setting up your campaign.
Note
When you enable the Inliner option, you won't see an immediate change to your code. After your message is sent to the queue, we'll convert the styles before we deliver it to your audience. Once you enable the Inliner, however, you can preview the campaign in a side-by-side viewer. There, you can verify our changes won't do something you don't want before you send.
The Inliner doesn't "fix" CSS support issues, only those that are safe to use in bulk email to begin with. For example, you still shouldn't use DIV tags to position your content.
Technical Support
Have a question?
Paid users can log in to access email and chat support.