Using CSS in HTML emails

Knowledge Base Home aero-right General Questions Using CSS in HTML emails

General Questions Updated on April 8, 2022

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

Do not rely on external (<link rel=”stylesheet”>) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.
Never use javascript in an email newsletter. Using javascript can have your newsletter marked as spam.
Do not use tag attributes on the <body> tag (such as widths or background colors). Most email services ignore the <body> tag.
Avoid background images. Many email clients do not support/encourage background images. You can use background colors if you wish (bgcolor tag attribute or background-color: css statement).
Do-not use CSS properties, for positioning, instead use nested tables, Avoid CSS shorthand such as those used for font properties and background properties.

Things To Do

Use tables for layout. Tables are more consistently supported.
We recommend that you place your CSS code inline to your content. It should look something like this:
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;">Your content here....</span>
Declare width, cellpadding, and cellspacing for all tables and table cells. This will result in a fixed width for the template.
Use hspace and vspace tag attributes to add whitespace around an image. Margin and padding inline styles are supported by most, but not all email clients

Our Company

Learn

User Resources

Get in Touch

Select your language

Benchmark Email Help Center