You are here: Home » Support » Articles » Using CSS and HTML in Email Newsletters

Using CSS and HTML in Email Newsletters

CSS and HTML support is far lower for email than it is for the web. This article explains the pitfalls to avoid and the methods to employ in order to get email newsletters to display consistently across many email clients.

Email newsletters are more popular than ever, and everyone loves to design a rich website-like newsletter for their subscribers. Unfortunately, email isn't the web. Your beautiful design work might look great in one email client, but chances are when you look at the same work a different email client the results will not be the same.

Why? In a nutshell, some email clients are moving away from full CSS support. CSS (Cascading Style Sheets) is the technology that allows for modern, powerful, flexible website designs.  (If you don't know what CSS is or how to use it, chances are the rest of this article isn't for you -- but show it to your email newsletter designer!)

As of early 2007, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.)  Worse, Microsoft's just-released Outlook 2007 actually takes a few big steps backwards in its CSS and HTML support, opting to use MS Word as the rendering engine.  (Check out Campaign Monitor's article for the shocking lowdown!)  For this reason, we consider compatibility with Gmail to be the baseline CSS and HTML support to design to. If it looks great in Gmail, chances are, it will look great in most other clients.

Even with inline styles, there are some restrictions. Fortunately, deprecated HTML tag attributes will fill the role of certain disabled inline styles (i.e. hspace, bgcolor, align, etc)

So here are Groundwire's guidelines for creating successful email newsletters that will look good even in the worst email clients. We don't mention much about design aesthetics, just coding practices that will succeed in all environments. (For testing, we used Gmail, Outlook 2003, Outlook Web Access, Hotmail, and Yahoo).

Things To Avoid

  1. 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.

  2. Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.

  3. Don't use tag attributes on the <body> tag (such as widths or background colors). Most email services ignore the <body> tag. You can try putting your whole newsletter inside a <div> and apply inline styles to it. Results may vary.

Things To Do

  1. Use tables for layout. Lots of them. You're welcome to try <div> tags for positioning and layout, but our research shows that tables are more consistently supported. C'mon now. Get over your table-phobia and embrace the parallelogram.

  2. Use inline styles liberally in tables. In fact, you'll find you can get the best mileage out of inline styles in <td> tags. That way you are setting up little style regions within each table. Think of these inline styles as miniature style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.

  3. Declare width, cellpadding, and cellspacing for all tables and table cells.  Doing so will result in a fixed width for the template. This helps because most people will view a newsletter in a preview pane which is much smaller than the width of their monitor. Don't leave widths to chance because many email clients like to "fill in the blank" which can break the design.

  4. Test your newsletter by sending to yourself or colleagues. This will give you the best chance to catch any problems before your whole subscriber list does! Send test messages to a variety of email clients such as Outlook, Hotmail, Yahoo, and Gmail.


  1. Don't use background images. Gmail, among others, will ignore any url() attribute in an inline style, and the simple background= tag attribute. You can use background colors if you wish (bgcolor tag attribute or background-color: css statement).

  2. Don't use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.

  3. Provide alt text for all images. That way the reader will see some content in place of the disabled images. This works particularly well for logos.

  4. Declare BOTH height AND width parameters for images. Some email clients will default to "0" for undeclared height or width. Poor old Outlook Web Access especially needs this for your table layout to display properly.

  5. 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 (Outlook 2007 and Live Hotmail provide only spotty support here).


External sources:

An awesome article by Xavier Frenette which lines out exactly which properties, tags, and selectors are or are not supported by various email clients.

A similar article by David Greiner which includes information about Macintosh

Campaign Monitor's Guide to CSS Support in Email

Campaign Monitor's rundown on CSS support in Outlook 2007



Document Actions

CSS-to-Inline Conversion Tool Available

Posted by Adam Friedman at Nov 01, 2010 03:56 PM
This is one of several enlightening articles on the matter. The Campaign Monitor article I found to be far and above the most thoroughly-researched.

I, too, grappled with designing HTML emails for these finicky, CSS-hating email clients. After almost two years, I thought: why not create a script that lets designers have their cake and eat it too?

I finally completed the first release of my CSS-to-Inline Conversion Tool. You can now code using CSS, and then pop your CSS and HTML into the PHP script (or web form on my site), and -- VOILA! -- your HTML comes back with inline styles, ready to send! All CSS rules of ordering and precedence are followed.

Try it out here:

Looks neat!

Posted by Jon Stahl at Nov 01, 2010 03:56 PM
Thanks, Adam, looks like a neat tool!

CSS in Emails

Posted by David Martinez at Nov 01, 2010 03:56 PM
Thanks for the tip on styling the TD tag, that's a create idea. I have recently been using tables with inline styles with much success. The TD tag styling will save me from individually styling each paragraph tag!

David Martinez (blog) (business)

Nice One

Posted by Pritesh at Nov 01, 2010 03:56 PM
Hey Dude...
Nice article... Help me lot for my project in which sending lots of emails..

Software developers

Posted by Marthinus at Nov 01, 2010 03:56 PM
I would really like to know who the people are that design and test these clients. Is there any logic to this or not? Why the lack of standards or consistency? Do these guys at Microsoft actually use their own software? Is it ever tested? I makes absolutely no sense and in the absence of one of them explaining themselves I must conclude that they are all morons.

Arrrrggggg! Why the inconsistency!!???

Posted by The Graduate at Nov 01, 2010 03:56 PM
I totally agree "Software Developers", i am having to use tables and inline CSS and I HATE tables, they are just awful! Microsoft is in a world of its own, it just seems like pure arrogance that they never have to comply with the W3C or any other standards that they must be fully aware of in the web community. Oh well, time to get back to the tables!


Posted by Chris at Nov 01, 2010 03:56 PM
Uhm, what?!!

So far I haven't found issues with outlook!

I'm an avid gmail user, and will always use gmail BUT css in gmail SUCKS.
It's the worst than ALL of the email clients!

good to know info

Posted by Sneha S at Nov 01, 2010 03:56 PM
Thank you for the tips & link to the support chart. It is helpful.

cheap software

Posted by cheap software at Nov 01, 2010 03:56 PM
the same! great!

Great resource

Posted by Nick at Nov 01, 2010 03:56 PM
Thank you for writing this. It answered all of my questions and concerns about formatting email newsletters properly.

I am happy to see that your website was ranked #1 on google for the keyword I used to find it. This was EXACTLY what I was looking for.

Outlook 2007

Posted by Jannik at Nov 01, 2010 03:56 PM
It's nice that you think in terms of usability when you advise users to use the ALT tag in images. Problem is that OL 2007 doesn't support that tag anymore, and will strip it out of the mail. Not only is that a huge step backwards for the designers who've depended on being able to get a message across to the end user even if images were turned off, but it's also a major step backwards for usability. Vision impaired people apparently don't need emails.

It's really helpfull

Posted by boo at Nov 01, 2010 03:56 PM
thanks mate.. it's really helpfull for me becausr suddenly I get a project to convert PSD email template to HTML/CSS...

Really nice...