Styles not working in Gmail
Solution 1
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style>
node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
Solution 2
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style>
in head
, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Solution 3
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td
tags
Do check this link. It will help you to build email template.
Dheeraj Patnaik
Updated on November 22, 2020Comments
-
Dheeraj Patnaik over 3 years
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id
OrderInfo
inside that I have a variable which generates a dynamic table.HTML
<div id="OrderInfo"> variable </div>
The dynamic table generates headers(
th
) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectorsCSS
#OrderInfo table tr th { text-transform: uppercase; background-color: #737373; color: white; }
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
-
Dheeraj Patnaik about 8 yearsI would like to give it to th's of a dynamic(generated at run time) table not to the div
-
Dheeraj Patnaik about 8 yearsIt is a dynaically generated th.How can I style beforehand? How can I give selectors inline? @dippas
-
Paolo about 8 years(updated the answer): ok put the css online on the
<td>
element - or whatever element needs to get styled. -
Dheeraj Patnaik about 8 yearsI would like to give it to th's of a dynamic(generated at run time) table not to the div. I cannot put that static.It will be generated by some logic, which I have no control on it @Paolo
-
Paolo about 8 yearsYou mean that you're not generating the html of the table, right?
-
Paolo about 8 yearsIn that case you can take the html as a string and edit it at runtime adding the css inline before sending the whole message to the client. This is not trivial at all and goes beyond the original question. Anywat there are tools to manipulate html content stored in a string.
-
Dheeraj Patnaik about 8 yearsYes, I'm not generating it, but I have to modify it @Paolo
-
Dheeraj Patnaik about 8 yearsCan I have a link or sample eg of what you explained about string @Paolo
-
Paolo about 8 years@DheerajPatnaik: ok, it requires to you some extra work. See my previous comment.
-
Paolo about 8 yearsIf you are on PHP start from here: php.net/manual/en/domdocument.loadhtml.php
-
Dheeraj Patnaik about 8 yearsI'm working on htm and whatever manipulations I have to do has to be through html or styles
-
dippas about 8 yearsI just gave you an example on my answer on how you can style it inline.
-
user64204 about 3 yearsNo, that answer is clerly wrong, Gmail does not support all styles.
-
dippas about 3 yearsWhere on earth you have read that I said it allows ALL styles?