Styling HTML email for Gmail

html css gmail html-email
Dónal picture Dónal · Jan 29, 2012 · Viewed 116.3k times · Source

I'm generating a html email that uses an internal stylesheet, i.e.

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

When viewed in Gmail it seems all the styles in the internal stylesheet are ignored. It seems Gmail ignores all styles other than inline rules, e.g.

 <h2 style="color: red">Email content here</foo>

Is this my only option for styling HTML emails when viewed with Gmail?

Answer

substate picture substate · Feb 3, 2012

Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/

Related questions

Google's Imageless Buttons

There have been a few articles recently about Google's new imageless buttons: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html http://stopdesign.com/eg/buttons/3.0/code.html http://stopdesign.com/eg/buttons/3.1/code.html http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html I really …

Read More
Gmail HTML email background

I'm working on an HTML email. The problem I get is that GMAIL doesn't use the "background-position" i give it. I have a table with 100% width that has a background that has to be centered. Most clients do this perfectly …

Read More
css - problems with negative margin in mail template

I'm creating a html mail template, I used a ribbon so I need to a move it a little bit past border. you can see the code here: http://jsfiddle.net/GEqk7/ To do this first i used position: relative; …

Read More