QuickBooksHelpIntuit

CSS in HTML Email

by Intuit• Updated 2 months ago

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>

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.

Mailchimp

Sign in now for personalized help

See articles customized for your product and join our large community of QuickBooks users.