Knowledge Base Home General Questions Using CSS in HTML emails
Normally CSS code is placed either in a separate CSS file or in a style tag in the head of the email. This will NOT work in emails. Most email clients (like YahooMail!, Gmail, Hotmail, etc), will remove the head and body tags by default. These clients wont reference external CSS files, because it might interfere with their own CSS coding. We recommend placing your CSS code in-line with your content instead of using body and head tags. Use a DIV with 100% width, for instance, instead of body or head CSS. Here’s an example of what we mean:
<div style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background-color:#EEEEEE;">Your content here....</div>
We recommend that you test your CSS thoroughly, long before you send your email. In general, easy stuff like font styles, sizes, and colors will work just fine. But some stuff, like DIVs and x,y,z positioning, won’t work reliably at all. Keep your use of CSS simple so that if it fails to load properly, people can still read your message.
Unfortunately, you just can’t rely too much on CSS in html email as much as you can with Web pages in browsers.
Things To Avoid
Things To Do
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;">Your content here....</span>