If you have designed an email via HTML that uses CSS but you find that it does not display as expected in some email clients, the problem may be due to the way that you have implemented your CSS. You may see this displayed as incorrect font colors, text size, borders, or other 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, there are many tools available to convert blocks of styling from embedded or external to inline, such as Litmus' browser converter tool.