Use the CSS Inliner

This feature requires Author user level or higher.

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.

Below, 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

  1. Create a campaign in your MailChimp account and navigate to the Template step of the Campaign Builder.
  2. Click on the Code Your Own tab and select Paste in code.
  3. On the Design step of the Campaign Builder, paste in your HTML code.
  4. Click the Settings tab.
  5. Check the box next to  Automatic CSS Inliner.
    Check CSS Inliner box.

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. Below 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.

Was this article helpful?
What can we do to improve articles like this?

Technical Support