Using CSS in Emails
Thursday, April 26th, 2007by Charles Hacskaylo | Chief Creative Officer
We get a lot of questions at Loyalty Lab about best practices in coding email. I’m going to address these FAQ’s on an ongoing basis in this blog, starting today with the use of CSS in your emails.
CSS, for the non-geeks among us, stands for Cascading Style Sheets. This is the modern way in which web pages are styled – CSS allows you to define style definitions as “classes” that can be applied to elements in your web pages. These styles can control almost all aspects of how your page appears: font, color, border, margins, etc. Here’s a link with a class applied to it:
<a href=”myurl” mce_href=”myurl” class=”boldRed”>Click here</a>
Your style definitions can be defined inside your web page (usually in the <head> tag), or defined in an external stylesheet hosted on your web server, allowing you to separate form from content. When your page is browsed, the stylesheet is fetched and loaded into your page via its URL. This is the most common method today on the web.
Unfortunately, you can’t use this technique in your emails – almost all email clients will not allow the stylesheet to be loaded as an external resource. In fact, the only external resource you can depend on being loaded properly are images.
So does this mean the solution is to include your style definitions inside your email? Yes, that will work for many email clients, but not all – webmail clients in particular. Read on for more.
The “Cascading” part of CSS means that styles loaded into a web page can overwrite styles defined earlier. When your email is loaded and displayed within a webmail interface, your CSS styles must now coexist with a whole other set of CSS styles – those used by the webmail system itself! Because the webmail system can’t allow your email’s CSS to overwrite any of its own styles, webmail providers have a variety of ways to solve this problem.
Some providers cleverly rewrite any CSS styles in your email in such a way that they only effect the elements in your email content. These are the good citizens, as the net result is that your email appears as intended. Some, such as MSN, completely strip out all your CSS classes. This means that your carefully crafted design will most likely completely fall apart without its style definitions.
What can you do? The only way to ensure that your email looks good across all email clients is to use “inline” style definitions. This means no class definitions, internal or otherwise. Every element to be styled has to include a “style” attribute within it. Here’s how to recode the above example:
<a href=”myurl” mce_href=”myurl” style=”color:#ff0000; font-weight:bold”>Click here</a>
So, in summary: if you want your email to look correct in all email clients, don’t use external style sheets, and don’t use CSS classes. Although tedious, use inline styles instead. In the Loyalty Lab CRM Suite application, we offer a WYSIWYG HTML editor that styles all elements in this way, making it easy for you if you are creating an email from scratch. If you’re converting existing HTML however, you may be facing a tedious search-and-replace task. The best practice is to create your email properly from the get-go, using inline styles.
