Styling HTML email for Gmail

Question

I m generating a html email that uses an internal stylesheet  i e    lt  doctype html gt   lt html gt   lt head gt     lt style type  text css  gt      h2 foo  color  red         lt  style gt   lt  head gt   lt body gt    lt h2 class  foo  gt Email content here lt  foo gt   lt  body gt   lt  html gt    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     lt h2 style  color  red  gt Email content here lt  foo gt    Is this my only option for styling HTML emails when viewed with Gmail

User · Answer

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>

User · Answer

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

User · Answer

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

User · Answer

Note that services and tools for sending emails may be able to inline your CSS for you  allowing CSS in  lt style gt  tags to work in Gmail   For instance  if you re sending emails with MailChimp  your CSS from  lt style gt  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

User · Answer

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    lt  -- if mso  gt   lt style type  text css  gt  body  table  td   mobile-text   font-family  Arial  sans-serif  important     lt  style gt   lt xml gt     lt o OfficeDocumentSettings gt       lt o AllowPNG  gt       lt o PixelsPerInch gt 96 lt  o PixelsPerInch gt     lt  o OfficeDocumentSettings gt   lt  xml gt   lt   endif -- gt    This is just a simple example  but  who know  it might come in handy some time

User · Answer

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

User · Answer

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

[html] Styling HTML email for Gmail

Examples related to html

Examples related to css

Examples related to gmail

Examples related to html-email