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?
This question is related to
html
css
gmail
html-email
The answer is
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:
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.
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>
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.
I had the same problem while designing a template in Mailjet. Solution of the problem was minified CSS code inside <style> tags.
Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/
Source: Stackoverflow.com