18
votes

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.

5

5 Answers

10
votes

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.

4
votes

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

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

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>
3
votes

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