Question: 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 selectors

**CSS**

```css
#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

Answer: 
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](https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps)

Here is what you could do:

`<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>`
Try with this styling making your link red with no special effect for the hover situation:

```
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

```

This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.