Why is Gmail blocking CSS in emails?
CssGmailHtml EmailCss Problem Overview
I used CSS in my email and sent it out.
When I received the email in Gmail, all the CSS was disabled; however, when I retrieved the email in thunderbird or outlook, everything is OK.
How would I fix this?
Css Solutions
Solution 1 - Css
Gmail doesn't block CSS totally. It still supports inline style. Why doesnt it support style block, I've no idea. To have a good overview of CSS support in various webmail and email clients, here's a good one. http://www.campaignmonitor.com/css/
Solution 2 - Css
I am answering it too late but this may help someone here. To be able to view your mail as it is in gmail and other email clients, you need inline style for each tag in your html, but writing inline css for each html tag is time consuming, to save your time use the builtin tool
http://templates.mailchimp.com/resources/inline-css/
Just paste your whole email template and you will get the html document with inline css in each tag. That much easy :)
Note: you can have your class and id in class as it is.
Solution 3 - Css
Stylesheets are one of many, many HTML features that are often blocked by webmail providers.
HTML mail is a world of hurt and it's not going to get any better — in fact, you can expect it to get worse. Almost every feature of HTML is not supported in some mailer or webmail service. Anything at all modern is a dead loss. And of course there are still the text-only clients.
Unless you have endless spare time to burn uglying up your code and testing every last mailer, forget HTML mail. Just send a text mail with a link to a normal web page where you can be sure everything will work as expected.
Solution 4 - Css
If you could embed styles to classes and ids in an email, those could accidentally collide with styles used by gmail to display the application, or on purpose by someone with malicious intentions. In-line styles are local to the tag, and therefor leave gmail styles alone.
Google has to protect the user experience that it has created for people.
Solution 5 - Css
Another good source of info is the MailChimp EMail Template Reference. I find the Development section particularly useful because it includes information about what CSS GMail does support and how to take advantage of it.
Solution 6 - Css
I have just been testing this and it does support inline styles, makes the code a bit ugly but you can get around it all.
Hope that helps.
Solution 7 - Css
If you're using Ruby on Rails and ActionMailer you can use the gem ActionMailer Inline CSS. All you have to do is install the gem and it will automatically inline all the CSS in your mail templates. It literally could not be easier.
Solution 8 - Css
<style type="text/css"></style>
Tags have worked for me, I did have an issue where all my CSS was not working because I missed a ;
It was a tedious process but I eventually found it.
At this link #9 from here gave me the initial hint that it may be due to an individual line of CSS.
Solution 9 - Css
Gmail blocks all external (referenced) assets - stylesheets, images, scripts, etc. This is to protect the privacy of the recipient. You can still include inline styles:
<span style="color:red;">Red text</span>