CSS will work in HTML email but it has limitations. In general, very simple CSS is always best when you code for email.
Below 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
Below 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 example below.
<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.