61

Since a lot of email clients ignore the HEAD tag, can I embed an inline stylesheet in the body?

Kzqai
  • 22,588
  • 25
  • 105
  • 137
Manu
  • 28,753
  • 28
  • 75
  • 83
  • 1
    Note: the accepted answer is no longer correct. See below for recent answers. You CAN use – Richard Aug 21 '22 at 00:41

7 Answers7

74

The short answer is no. Gmail strips the tag and it's content.

Hotmail, Yahoo! Mail and Windows Live Mail does not strip style-tags in the body-element.

But take a look at "The Ultimate Guide to CSS" for HTML email over at Campaign Monitor.

Bart Verkoeijen
  • 16,545
  • 7
  • 52
  • 56
cllpse
  • 21,396
  • 37
  • 131
  • 170
  • 9
    The guide you've linked to is either out of date or in error on what seems like rather an important point. It indicates that Gmail strips out ` – Mark Amery Aug 12 '14 at 22:48
  • 3
    Does this is still relevant now, in 2018? – lolbas Feb 22 '18 at 14:07
  • 4
    Yes and no. You cannot use in the BODY of an email for most clients, but you can use in the HEAD: https://www.campaignmonitor.com/css/style-element/style-in-head/ – png Dec 20 '18 at 23:11
8

Creating an HTML email that works in every email client is hard. I spent several months refining a good looking template.

http://commadot.com/the-holy-mail/ - original blog with my findings.

http://commadot.com/email-best-practices/ - latest greatest.

Specific answer to your question: Gmail will be ok with style="" but not with a <style> block.

Phrancis
  • 2,222
  • 2
  • 27
  • 40
Glen Lipka
  • 1,019
  • 8
  • 14
  • As of 2022, this answer is no longer true of Gmail. It will accept – Richard Aug 21 '22 at 00:43
7

You might want to check out the free html email templates that CampaignMonitor and MailChimp (EDIT: and Ink by Zurb) provide:

http://www.campaignmonitor.com/templates/

http://www.mailchimp.com/resources/templates/

http://zurb.com/ink/

There's an updated version of Campaign Monitor's helpful guide here: http://www.campaignmonitor.com/css/

Unfortunately, the most reliable HTML to use in emails is totally stone age

EDIT: Ink has an "inliner" tool that takes the contents of style tags and inlines them onto the appropriate elements: http://zurb.com/ink/inliner.php

Andy Ford
  • 8,410
  • 3
  • 26
  • 36
  • the link for inliner is broken, however there is a current resource here that accomplishes this: https://putsmail.com/inliner – SMAG Feb 26 '22 at 18:46
  • both links for the templates are now broken, mailchimp redirects to an email marketing page and campaignmonitor will let you build a template only for sending emails from their service, no stylesheet or downloadable template. You might be able to pull it from a test email but I don't feel like scrubbing my emails through their service. – SMAG Feb 26 '22 at 18:49
5

Most gmail clients now support embedded CSS as of September 2016, so it should be safe to do.

https://litmus.com/blog/gmail-to-support-responsive-email-design

Chris Villa
  • 3,901
  • 1
  • 18
  • 10
1

Yes you can. However you have to keep in mind that few email clients respect css standards. Just stick to basic css properties like margin and padding, etc., and it should all be fine.

Also you can style your html elements inline (<div style="">) though it's not an elegant solution.

Ulf Gjerdingen
  • 1,414
  • 3
  • 16
  • 20
teebot
  • 1,089
  • 2
  • 12
  • 25
1

The top answer is outdated. Gmail now supports using media query's along with other css properties now - https://developers.google.com/gmail/design/css

makonnen
  • 11
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 06 '22 at 23:08
0

As others have pointed out, the accepted answer is out of date.

In my own tests, as of 8/20/2022, Gmail supports elements with classes, and the use of the <style> tag, as long as it is in the <head>. Also, Gmail no longer strips out inline classes for elements.

Example email:

<head>
 <style>
   div.mydiv { background-color: blue;  }
 </style>
</head>

<body>
  <div class='mydiv'>This is the contents of my email message!  Thank you 
  google, for observing the style tag!</div>
</body>
Richard
  • 1,912
  • 20
  • 28