Creating a beautifully designed email that displays properly and consistently across email clients can be a stressful, headache-inducing experience, especially for those new to email. It doesn't have to be! You can plan ahead and anticipate display issues by designing and coding your email with this information in mind.
CSS, or Cascading Style Sheets, is a powerful language that was created to allow web developers the ability to separate content from presentation in web pages. While CSS is a modern standard for the web, it’s history and support in the email world has been rocky at best. There are three different ways that you can use CSS to style your email: External, Embedded (sometimes referred to as Internal), and Inline:
External CSS: External styles are listed on one page or sheet, and the email links to the separate file to reference the styles.
<link rel="stylesheet" type="text/css" href="styles.css">
Embedded (Internal) CSS: Embedded styles are listed in the same fashion as external styles. Rather than the email linking to a separate page to reference the styles, internal styles are listed in the header (or <head> tag) of the email.
<style type="text/css">
a:link {color: #000000}
a:visited {color: #CCCCCC}
a:hover {color: #333333}
a:active {color: #333333}
</style>
Inline CSS: Inline styles are used directly within HTML tags by adding the “style” attribute. The style attribute can contain any CSS property, and will only affect the tag they are applied to.
<a href="http://www.exacttarget.com" style="text-decoration: none;">
Which CSS technique is best for email? To date, the majority of email clients support inline CSS, along with most basic formatting styles. Be mindful that many web-supported CSS properties aren’t consistently supported in email. Among the properties that are well supported in email include: font-family, font-size, font-style, font-weight, color, padding and border.
Remember these tips:
For more tips on how to design and code for email, download our whitepaper, "Email Marketing Design & Rendering: The New Essentials."
Justine Jordan
ExactTarget Campaign Solutions Team
CSS, or Cascading Style Sheets, is a powerful language that was created to allow web developers the ability to separate content from presentation in web pages. While CSS is a modern standard for the web, it’s history and support in the email world has been rocky at best. There are three different ways that you can use CSS to style your email: External, Embedded (sometimes referred to as Internal), and Inline:
External CSS: External styles are listed on one page or sheet, and the email links to the separate file to reference the styles.
<link rel="stylesheet" type="text/css" href="styles.css">
Embedded (Internal) CSS: Embedded styles are listed in the same fashion as external styles. Rather than the email linking to a separate page to reference the styles, internal styles are listed in the header (or <head> tag) of the email.
<style type="text/css">
a:link {color: #000000}
a:visited {color: #CCCCCC}
a:hover {color: #333333}
a:active {color: #333333}
</style>
Inline CSS: Inline styles are used directly within HTML tags by adding the “style” attribute. The style attribute can contain any CSS property, and will only affect the tag they are applied to.
<a href="http://www.exacttarget.com" style="text-decoration: none;">
Which CSS technique is best for email? To date, the majority of email clients support inline CSS, along with most basic formatting styles. Be mindful that many web-supported CSS properties aren’t consistently supported in email. Among the properties that are well supported in email include: font-family, font-size, font-style, font-weight, color, padding and border.
Remember these tips:
- CSS-based layouts are only successful in the most compliant of email clients. Your design will render more consistently when HTML tables are used for layout. The use of embedded or external styles is not recommended for consistent display across email clients (Gmail only supports inline styles).
- Many CSS properties popular with web developers have poor support in email. These include (but are not limited to) margin, line-height, clear, list-style-image, position, z-index, background-image, background-position and background-repeat. Avoid the use of these properties, or test thoroughly to ensure your email is displaying as intended.
- Small changes in how web-based email clients support CSS occur often and without much fanfare, making a case for frequent and continued testing.
- Know your audience. If you have data showing that all of your subscribers use Thunderbird to view their email, you'll have more flexibility in the types of CSS you may use. On the other hand, if most of your audience is using Outlook 2007, you may want to take a more conservative approach.
For more tips on how to design and code for email, download our whitepaper, "Email Marketing Design & Rendering: The New Essentials."
Justine Jordan
ExactTarget Campaign Solutions Team
Comments for Email Design Tip of the Week: Understanding CSS Support for Email
blog comments powered by Disqus