QuickBooksHelpIntuit

CSS in HTML Email

by Intuit• Updated 4 months ago

CSS will work in HTML email but it has limitations. In general, keeping your CSS basic is always best when custom-coding an email.

In this article, we’ll share our recommendations for using CSS in HTML email, and information to help you troubleshoot CSS-related issues.

General CSS tips and troubleshooting

Here are some guidelines to help you code CSS for your emails effectively.. It’s important that you test your code often. CSS will work with HTML email however, the outcome may differ based on the email client.

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, always use inline CSS over embedded CSS.

Inline your embedded CSS

We strongly recommend that you use our CSS Inliner tool to help 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>

Sometimes, a subscriber's email service will strip out lines of code that begin 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.
To learn more about coding emails using HTML email, check out our Email Design Reference.

Mailchimp