Gmail and CSS

Gmail doesn't seem to like CSS in html newsletters. It seems to do alright with colors but font styles it doesn't render all that well. I've used my own template and then recently downloaded one of campaignmonitor's free ones. Both came out a little funny in gmail.

Anyone had any similar experience?

When I download it down to Thunderbird it looks fine..G just doesn't like it.


Mathew Mathew, 9 years ago

With Gmail you'll need to use inline CSS syles, as it strips out any styles in the header. That's the most likely culprit for rendering problems.

Get in touch with us on Twitter:
We're also on Facebook:
mbowzeylo mbowzeylo, 9 years ago

When I code my newsletters I put my css in the head and also duplicate it with inline styles in the body. Different email clients will remove it from different areas but putting it in both places offers good end results in my opinion. The end justifies the means... so to speak. Plus, the css is usually pretty light in HTML emails, as they are best kept simple, so duplicating the CSS will not increase the file size that much.

You can see a working example here. It looks identical in gmail as it does in the browser. The only thing that gmail removes, in my example, are the Selectors  a:link, a:hover and their associated attributes.

Hope this helps.

Don't forget about this great resource from Campaign Monitor, they have done all the hard work for us! Cheers guys.

jumptronic, 9 years ago

A coworker of mine just stopped by to tell me she noticed that gmail wasn't recognizing font-family:Times....
However, if you use a font face tag for Times N.R. it renders correctly. Strange....

Stig Stig, 9 years ago

The only thing I'm wondering is if there's any mail enviroments that support CSS, but not inline CSS? I wouldn't think so, which would mean inline CSS is all you need. Except, of course, for pseudo-classes.

The Campaign Monitor Blog – HTML email smarts to go with your good looks.
mbowzeylo mbowzeylo, 9 years ago

Now that I step back a few feet and look at it, I think you're right stig. Maybe a guy should just put his CSS inline and limit the css in the head to pseudo. Interesting.

<!-- off topic : You know, it's maddening because putting CSS inline, and repeating yourself over and over is no different than using "font" except you have more control over styling options. Hoorah for email standards! -->

Stig Stig, 9 years ago

I know.. It does feel like the old days, haha.

The Campaign Monitor Blog – HTML email smarts to go with your good looks.

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free