CODEWITHSUNDEEP
htmlcssemailgmail
Gokul Panigrahi
Gokul Panigrahi

Reputation: 172

CSS styles in mail body in Gmail

Does anyone know or can confirm if Gmail strips out style blocks from the mail body? They claim to allow style tags in the HTML body. However, in my tests style tags in the body were removed from Gmail. I tested with this HTML, only the head style got applied.

<html>
    <head>
        <style>
            h1{color:red;}
        </style>
    </head>
    <body>
        <h2>Hi from H2-1</h2>
        <style>h2{color:green;}</style>
        <h1>Hi from H1</h1>
        <h2>Hi from H2-2</h2>
    </body>
</html>

Gmail-Css-Fail

Upvotes: 1

Views: 5138

Answers (3)

Mak
Mak

Reputation: 1121

From my simple test, if you use No-Comma Color Functions in CSS in your inline styles the whole style attribute will get stripped from that element.

This HTML

<span style="background-color:rgb(239 68 68 /  1);color:rgb(255 255 255 / 1 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with slash without comma </span>

<span style="background-color:rgb(239 68 68 );color:rgb(255 255 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> without slash without comma </span>

<span style="background-color:rgb(239, 68, 68);color:rgb(255, 255, 255 );font-weight:700;margin-left:1rem;margin-right:1rem;padding:1rem;"> with commas </span>

Looks like this in Thunderbird: Thunderbird html

And like this in gmail (webmail): In gmail

If using postcss, postcss-preset-env should help.

Upvotes: 0

Michał Sadowski
Michał Sadowski

Reputation: 2155

Generally, working with html email is a massive pain. All I can recommend you is to just run your html through some premailer, like: http://premailer.dialect.ca/. It should take care of inlining all styles. There are no easy answers in the email land, it's still year 2000 there.

Upvotes: 2

cmdshorty
cmdshorty

Reputation: 35

You have to do all inline styles for almost all major email providers.

<h2 style="color: #ff00ff;">H2 Title</h2>

<p style="color: #fff; padding: 10px 0; text-align: center;">This is a paragraph section.</p>

Upvotes: 2

Related Questions