I am sending an email template from my BE mail server. The details of this implementation are not important.
When the email arrives at Gmail inbox, the html is showed, but with no CSS.
What i tried
First thing i tried is to inline the whole embedded CSS ( tag) with inliner tool like Mailchimp's inliner.
After this, it worked. This is because all of the styles were set inline for the individual elements.
This is not convenient for me, since there needs to be a post-processing period before the email is sent, and that needs a plugin on BE or my to do it manually. (NOTE: i am creating template by writing HTML and CSS with classes, like a regular html page).
Is there a problem with Gmail taking embedded () CSS, because on some other templates i use, having classes and media queries works perfectly?
I found out that the inline CSS tool that is used, did not only add the styles for individual elements, but it cut down the <style> code overall.
This meant that code was shorter and Gmail accepted it in that way.
Conlusion
I found out that Gmail allows only up to 16KB of characters inside one embedded CSS (<style>).
In this article it is explained how Gmail treats the excess CSS code over 16kB. It cuts it off and that is why there is not CSS visible at all.
Solution from the article:
Minify - remove unnecessary whitespace from around your styles. You can do this manually or use some tool, but be sure you use something built for email rather than web to avoid any issues.
Uglify - change class names to shorter potentially unreliable names, so .two column layout{} could become .col2{} or even .a{}. Again you can do this manually or with some email specific tooling.
Use multiple style blocks - If you have multiple blocks Gmail will only start removing when the total size is over 16kb.
In my case, i had some excess CSS from the previous template work, and that is what brought the total CSS size of that one <style> content over 16kB.