Since a lot of email clients ignore the HEAD tag, can I embed an inline stylesheet in the body?
7 Answers
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.
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.
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/
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
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.
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
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>
Related