Font Color in HTML Email - Gmail

css gmail html-email
Kevin_TA picture Kevin_TA · Jun 7, 2012 · Viewed 42.3k times · Source

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.

Answer

colonelclick picture colonelclick · Jun 7, 2012

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.

Related questions

Styling HTML email for Gmail

I'm generating a html email that uses an internal stylesheet, i.e. <!doctype html> <html> <head> <style type="text/css"> h2.foo {color: red} </style> </head> <body&…

Read More
HTML formatted email not showing up at all in Gmail but is in other mail clients

I'm currently sending html formatted emails from PHP's mail() function and checking them simply to make sure they are showing up as HTML (formatting aside, I'm well aware that the formatting will vary (probably drastically) from client to client). They …

Read More
Why is Gmail blocking CSS in emails?

I used CSS in my email and sent it out. When I received the email in Gmail, all the CSS was disabled; however, when I retrieved the email in thunderbird or outlook, everything is OK. How would I fix this?

Read More