Can I put a <style>...</style> tag within the body of a HTML file to send in email?
HtmlCssEmailHtml Problem Overview
Since a lot of email clients ignore the HEAD tag, can I embed an inline stylesheet in the body?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
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
Solution 4 - Html
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
Solution 5 - Html
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.
Solution 6 - Html
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