 |
HOW TO: Use In-line Styles for HTML Email
When creating a website, the use of global styles using CSS and Div style tags really make your web pages pop. You can define exactly how they look regardless of the browser used and your pages look great. HTML email however, is different. You can use CSS and Div styles in your HTML message, but in some instances, especially in Outlook 2007 and web based email clients, those styles do not carry over. There are several reasons for this and some work arounds available to help make your messages look nice in any client.
CSS Style sheet definitions are located in the <HEAD> tags of the HTML. When sending to a web based email client like Yahoo!, Gmail, or Hotmail, their style definitions will override those defined in your email. That is because there are only one group of <HEAD> tags allowed on a page. Of course Outlook 2007 is also messes up styles, but that is becuase Outlook 2007 does not render HTML properly. Styles must be replaced with straight HTML and table tags.
In order to render your HTML email message as intended, you can still use styles, but you must put them inline, meaning on the same line where you define your code. So instead of your <P> tags referencing a style, you define the style right in the tag. Here are some examples:
- Paragraph tags:
<P style="font-size: 12pt; color: Red">Sample Paragraph</p>
<H1 style="border-width: 1; border: solid; text-align: center>Sample Header</p>
- Links: <a href="url" style="color: red; background: #ffffff;">this will always be red with a white background</a>
Unfortunately, you cannot control link, hover, or visited properties inline.
Div styles are another problem with Outlook 2007 and with web mail. Outlook 2007 simply does not support Div styles. You must use plain tables to render your HTML email message and manipulate the layout. With web mail, the problem is with the Div placement. When defining where a Div position is, you cannot easily take into account where that spot on the page lies in relation to the web client wrapper. So if you place a division tag at 4000, it might appear to high up on your page, crossing over other text.
Div tag example:
- <div style="position: absolute; left: 10px; top: 4000px;">
Instead of Div styles, regular old tables are recommended so your message is the same accross clients.
As with everything relating to sending effective email campaigns, testing is extremely important. Using a test list to a variety of email clients will help you make modifications to your message to improve the appearance to the vast majority of your email customers. Outlook 2007 should always be your lowest common denominator in testing, because it is the worst client for rendering email HTML messages. You may have to give up on a certain style for some types of clients in order to get the majority of your emails to look the way you want. -- Arial Software
Read online.
Return to Articles |
