Font Color in HTML Email - Gmail

Question

I know that I have to use inline CSS to style anything in an HTML email, but I am noticing an odd override that is occuring in gmail. I am trying to change the color of the text in a table row:

<tr style='color: #000; font-size: 14px; font-family: Verdana, serif;'>

but when I open this email in gmail, the font-family and black color is being overwrote by gmail stylings. I'm seeing this via Firebug:

That purple color is being used instead of the black I want, and the font family is defaulting to arial,sans-serif. Does anyone know of a way to safely override the styling that gmail is forcing on me?

UPDATE

I changed the color to a non-black color, i.e. #212a2c and the color changed correctly, but the font-family is still stuck on arial.

Unvarnished

Answer 1

It looks like you are styling the TR but gmail is over riding it with a style to the TD. When a TD and a TR conflict, the TD will win because it is the most immediate container...the closest match as per css3 rules. I think if you use inline style on your TD you will be able to over ride it.

Stabile

Yea I just figured that. Added styling at the <td> level and it works now. This will get tedious.... Thanks. – Unvarnished

Still strange that simply changing the color from black to something else was enough to override the purple... – Unvarnished

I can't find anyting 'official' about this, but from experience I have noticed odd behavior when mixing 3-letter color codes with 6-letter color codes, even though they should be equivalent. In your case, #000 did not work in your original example, but I would be most interested to know if #000000 would work. – Stabile

#000000 doesn't work; #111 does though - it appears gmail has an odd allergy to pure black. – Domenech

Answer 2

GMail will change your links from black (#000000) to the default blue, presumably as an anti-spamming feature.

To get around this, just change the color of the font to (#000001), e.g.

<a href="#" style="color: #000001;">Click HERE</a>

Ulcerative

This is no longer the case. #000000 will work as intended, tested it right now. – Unbolt

Answer 3

From experience I have found the safest thing to do with color codes is always to use the 6 number code - I had a similar problem once and it was fixed simply by changing the color code from 3 digits to 6 - it doesn't take any time at all to type 3 extra numbers after all :)

Whin

Answer 4

1. Dont use styles on <tr>, do it on <td> or a <span> around the text.
2. It dosnt matter if you write #000, #000000 or Black as a color :)

Wallah

Wow, using <span> [stuff] </span> worked like a charm for my html emails! I was bamboozled prior to stumbling across this. – Coronet

Glad I could help you with my 7 years old post ;) – Wallah

Answer 5

"It dosnt matter if you write #000, #000000 or Black as a color :)"

Yes it does, sometimes emails render 3 hexadecimal colours in a slightly different way. As a rule of thumb, it's best to stick with 6 for compatibility.

Kliman

Answer 6

I got this same issue and I got a workaround to this by trying to give text a gradient but keep both colour same. It worked for me.

.gradient-text {
        background-image: linear-gradient(#ffffff, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }

Also, remember some email service providers like Gmail do cut of the head of your template and mentioned here StackOverflow thread so I tried putting style tag inside the body tags and it worked

Dodgson