Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Color in HTML Email - Gmail

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.

like image 543
Kevin_TA Avatar asked Jun 06 '12 22:06

Kevin_TA


People also ask

How do I use font color in Gmail?

Double tap the text you want to format. Tap Format, then choose a formatting option like bolding, italics, or changing the font color.

How do you change the color of the font in HTML?

To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.

How do I change font color in Gmail labels?

Hover your cursor over the label's name in the left column. Click on the three dots to the right of the label's name. Hover over on “Label color.” Select the color you want to assign to that label — you can either choose a basic color combination or create custom colors for the background and text.

How do you color text in an email?

Under Compose messages, choose Stationery and Fonts. On the Personal Stationery tab, under New mail messages or Replying or forwarding messages, choose Font. In the Font box, choose the font, style, size, and color that you want to use. You can see a preview of your changes as you make them.


2 Answers

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.

like image 176
colonelclick Avatar answered Sep 18 '22 19:09

colonelclick


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

like image 29
Liz Long Avatar answered Sep 16 '22 19:09

Liz Long