If you've designed an email using HTML that uses CSS but find that it doesn't display as expected in some email clients, the problem may be due to the way you've implemented your CSS. This can show up as incorrect font colors, text size, borders, or other rendering issues.
This article is oriented for email designers that are creating messages using HTML and uploading to Act-On. For information about styling your email in the WYSIWYG editor, see Email Branding and Design Overview.
First, we will go over all of the ways you can add styles to your email. Then we will discuss how different email clients support styling in emails, and we'll finish with a solution for you to create emails that will display your styles across the majority of email clients and web browsers.
How to include style in your email
There are three ways to include CSS in your emails: an external link, embedded, and inline.
External link
Adding a stylesheet using an externally hosted link (eg. from your website). The link can be added to a Custom Content block in the Email Composer.
<link href=:"https://success.act-on.com/styles.css" rel=’stylesheet’></link>
Embedded
Styling that is placed near the top of the editor surrounded by <style> tags.
<head>
<style>
p {color: blue;}
</style>
</head>
Inline - Best Practice
Styling is added as a property within each specific element. When you design an email using Act-On's WYSIWYG Email Composer, such as using our Rich Text Block, inline styling is automatically included.
<p style=”color: blue”>link</p>
Email Clients do not universally support CSS
Although most email clients will respect embedded styles, this is not the most effective way to safeguard your styling and consistency. For a full list of supported clients, visit Litmus' blog post: Do email marketers and designers still need to inline CSS?
Solution: Use Inline Styles
The most effective way to ensure your email styling is consistent across email clients is with inline styling.
Thankfully, you don't have to convert your styles by hand. Many code editors and email-building tools include a built-in CSS inliner that automatically converts embedded or external styles into inline styles for you, so your email displays consistently without the extra manual work.
Related to