Styling HTML email for Gmail

Question

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?

Yes this is the only one since many web based e-mail clients do not recognize internal stylesheets. Actually the inline styleing is the recommended way to design html newsletters. — Mike, Jan 29 '12 at 19:50
As far as I know, email readers can be expected to support html 3.2 and css 1.1. — , Jan 29 '12 at 19:51
How did you generate your email? I mean con you add the code of creating the intent? — RaphMclee, Sep 03 '12 at 10:56
In my case, i am seeing a behavior where all style tags are not honored on Android Gmail app client. This is a bit ridiculous. — Roman, Sep 28 '16 at 20:44

score 73 · Answer 1 · answered Feb 03 '12 at 21:43

73

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

answered Feb 03 '12 at 21:43

substate

890
1
5
5

2

This site is awesome. Shows warnings and gives you a plain text output as well as recrafting your HTML. – jamesbar2 Oct 10 '12 at 21:51
1

This Premailer is in Ruby, source: https://github.com/premailer/premailer. There's another one in Python: https://premailer.io/ source: https://github.com/peterbe/premailer, both are open source. – Maxime R. Jun 09 '16 at 10:15
2

**This answer is no longer accurate.** gmail supports styles and classes and has official docs on the subject - see Matthew Johnson's answer below. – mikemaccana Nov 03 '16 at 15:10

score 30 · Accepted Answer · edited Nov 03 '16 at 15:36

30

The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!

For reference, you can check the official gmail CSS docs.

As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.

edited Nov 03 '16 at 15:36

mikemaccana

110,530
99
389
494

answered Sep 30 '16 at 19:05

Matthew Johnson

4,875
2
38
51

1

It looks like that it still doesn't work. We tried it in Litmus, but it doesn't work. Is there any special reason ? – Arian Oct 05 '16 at 18:19
@ArianHosseinzadeh What doesn't work? Added a reference to their documentation on the matter. – Matthew Johnson Oct 05 '16 at 18:24
We tried it in Litmus, and it ignores the non-inline stylings. Have you tried – Arian Oct 05 '16 at 18:36
1

@ArianHosseinzadeh I did a copy-n-paste from their example in their docs, and ran it through [putsmail](https://putsmail.com). Styles are showing in gmail. I verified Android gmail app and gmail in a Chrome browser. My guess is that the Litmus previews haven't been updated to reflect the change. – Matthew Johnson Oct 05 '16 at 18:57
1

I was wondering why my styles weren't working, and realized that I had placed them within the `body` tag instead of the `head` tag. – palswim Nov 13 '18 at 06:24
I actually found that using style in the head worked while inline styles didn't for certain cases. – Johann Apr 21 '22 at 08:09

score 12 · Answer 3 · answered May 22 '14 at 12:43

12

Gmail started basic support for style tags in the head area. Found nothing official yet but you can easily try it yourself.
It seems to ignore class and id selectors but basic element selectors work.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

it will create a style tag in its own head area limited to the div containing the mail body

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

answered May 22 '14 at 12:43

fuchs777

993
1
14
30

It still doesn't support Media queries though which is a bit of a shame. Classes and IDs are kind of useful too :) – Eoin Mar 24 '16 at 13:01
2

They now do media queries too and fuller support for css styling. http://stackoverflow.com/questions/39759764/unexpected-value-fileuploadmodule-imported-by-the-module-uploadermodule-ng – crowmagnumb Sep 30 '16 at 15:44

score 9 · Answer 4 · answered Dec 21 '17 at 17:31

I agree with everyone who supports classes AND inline styles. You might have learned this by now, but if there is a single mistake in your style sheet, Gmail will disregard it.

You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? Run it through the CSS Validator (for example http://www.css-validator.org/) and see what happens. I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes.

Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoft code block, like so:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

This is just a simple example, but, who know, it might come in handy some time.

Thanks, the part about invalid CSS saved me lots of time. If you're still around let me know please. — Shadow The GPT Wizard, Jun 13 '19 at 07:51
Hey @ShadowWizard. I was gone for a while but am back. Glad it saved you some time. — Shawn Spencer, Sep 05 '19 at 14:51
Cheers, just wanted to make sure the bounty won't be wasted. :-) — Shadow The GPT Wizard, Sep 07 '19 at 13:27

score 3 · Answer 5 · answered May 30 '15 at 11:27

Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style> tags to work in Gmail.

For instance, if you're sending emails with MailChimp, your CSS from <style> tags will get inlined automatically by default. With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab:

Image showing how to do this in Mandrill

score 2 · Answer 6 · answered Mar 22 '15 at 22:59

As others have said, some email programs will not read the css styles. If you already have a web email written up you can use the following tool from zurb to inline all of your styles:

http://zurb.com/ink/inliner.php

This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted.

Thank you for the inliner link. – Shawn Spencer Sep 05 '19 at 14:54 — Shawn Spencer, Sep 05 '19 at 14:54

score 0 · Answer 7 · edited Aug 07 '20 at 19:45

0

I had the same problem while designing a template in Mailjet. Solution of the problem was minified CSS code inside <style> tags.

edited Aug 07 '20 at 19:45

Dharman

30,962
25
85
135

answered Aug 07 '20 at 19:39

Vojtěch Remiš

11
2

score 0 · Answer 8 · answered Jan 11 '22 at 21:54

@shawn did give an example how to use a combination of styling in the head section together with inline styling. Some email clients (Outlook, Gmail, etc.) have tricky things, these can be fixed with css in the head style.

The extra table <table width="580"> is for Outlook to solve 'width' problems and also to center the layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<base target=_blank href="http://">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="x-apple-disable-message-reformatting"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>
</title>
<link href="https://fonts.google.com/specimen/Open+Sans#standard-styles" rel="stylesheet" type="text/css"/>
<style type="text/css">
.ReadMsgBody { width:100%;background-color:#eeeeee }
.ExternalClass { width:100%;background-color:#eeeeee }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100% }
a[x-apple-data-detectors] { color:inherit !important;text-decoration:none !important;font-size:inherit !important; font-family:inherit !important;font-weight:inherit !important;line-height:inherit !important }
div[style*="margin: 16px 0"] { margin:0 !important }
body { margin:0;padding:0;font-family:'Open Sans','Verdana',Geneva,sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none }
#outlook a { padding:0 }
.yshortcuts a { border-bottom:none !important }
table,td { mso-table-lspace:0pt;mso-table-rspace:0pt }
table,tr,td { border-collapse:collapse }
tbody { width: 100% }
p,a,li,blockquote { mso-line-height-rule:exactly }
li { mso-margin-top-alt:0;mso-margin-bottom-alt:0 }
@media screen and (min-width: 600px) {
  table.container {width: 580px !important; margin: 10px auto !important }
  div.fullwidth { width: 580px !important }
  div.halfwidth { width: 290px !important }
}
</style>
<!--[if gte mso 11]>
<style type="text/css">table {border-spacing: 0;}table td {border-collapse: separate;}</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">table{border-spacing:0} table td{border-collapse:collapse}</style>
<!--<![endif]-->
<!--[if gte mso 15]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<!--[if gte mso 9]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body bgcolor="#ffffff" style="width:100%; margin:0px; padding:0px; border:0px; -webkit-text-size-adjust:100%">

<!-- BODY TABLE -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; padding:0; border:0; background-color:#ffffff">
<tr>
<td width="100%" align="center" valign="top" style="padding:0px !important; border-collapse:collapse; border-spacing:0; border:0px; text-align:center; vertical-align:top; -webkit-text-size-adjust:100%;">

<!-- WRAPPER TABLE -->
<!--[if (gte mso 9)|(IE)]>
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; max-width: 580px; margin: 0 auto; background-color: #ffffff; border:1px solid #e7e7e7">
<tr>
<td class="font0" align="center" style="padding: 0 !important; font: normal 0px/0px sans-serif !important; font-size: 0px !important; border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; vertical-align: top;">

<!-- EACH CONTENT ROW AS BELOW -->
<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div class="fullwidth" style="width: 290px; display: inline-block; vertical-align: top;">
<table width="100%" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td style="padding: 20px 10px 0px 10px; font: normal 12px/16px sans-serif; color: #555454; text-align: left; -webkit-text-size-adjust: 100%;">
YOUR CONTENT HERE
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

<!-- END WRAPPER TABLE -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

<!-- END BODY TABLE -->
</td>
</tr>
</table>

</body>
</html>

Styling HTML email for Gmail

8 Answers8

Linked