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:

enter image description here

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.

score 11 · Accepted Answer · answered Jun 06 '12 at 22:43

11

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.

answered Jun 06 '12 at 22:43

colonelclick

2,165
2
24
33

Yea I just figured that. Added styling at the `` level and it works now. This will get tedious.... Thanks. – Kevin_TA Jun 06 '12 at 22:45
Still strange that simply changing the color from black to something else was enough to override the purple... – Kevin_TA Jun 06 '12 at 22:47
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. – colonelclick Jun 07 '12 at 21:56
2

#000000 doesn't work; #111 does though - it appears gmail has an odd allergy to pure black. – Greg Mar 04 '13 at 22:32

score 5 · Answer 2 · answered Jun 21 '13 at 16:40

5

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>

answered Jun 21 '13 at 16:40

crmpicco

16,605
26
134
210

1

This is no longer the case. #000000 will work as intended, tested it right now. – Miguel Guerreiro Apr 10 '17 at 08:59

score 4 · Answer 3 · answered Jun 17 '12 at 19:23

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 :)

score 4 · Answer 4 · answered Jul 02 '12 at 12:48

4

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

answered Jul 02 '12 at 12:48

Bidstrup

1,597
2
16
32

1

Wow, using `` [stuff] `` worked like a charm for my html emails! I was bamboozled prior to stumbling across this. – 3kstc Oct 11 '19 at 00:15
1

Glad I could help you with my 7 years old post ;) – Bidstrup Oct 14 '19 at 07:30

score 3 · Answer 5 · answered Sep 07 '15 at 08:27

3

"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.

answered Sep 07 '15 at 08:27

Self Designs

238
4
12

Font Color in HTML Email - Gmail

5 Answers5

Linked