Use the CSS Inliner

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 in a Code your own template, follow these steps.

1. In the Content section of the email checklist, click Design Email.
2. On the template step, click the Code your own tab and select Paste in code. If you’re using the new builder, click Yes, continue to Classic in the popup modal.
3. On the Code step, paste in your HTML code.
4. Click the Settings tab.
5. Check the box next to Automatic CSS Inliner.
   

Selectors supported by the CSS Inliner

Use the Automatic CSS Inliner to include sophisticated CSS styling in your HTML email, including attributes, pseudo-classes, descendants, and more. These selectors are 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 email.

• 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. However, you can preview the email in a side-by-side viewer and verify our changes are good before you send.
• The Inliner doesn't "fix" CSS support issues, only those that are safe to use in bulk email. For example, you still shouldn't use DIV tags to position your content.