Well there are a lot of controversy on the subject but, here is what I found. Prepare for a wall of text. It appears you can use a workaround to make <style> work, as stated here.
Here are the actual quotes:
Gmail strips class and id attributes from all elements but leaves some
other attributes intact: style, title, lang, width, height, alt, href.
Since href and alt are not technically legal attributes for divs I
decided not to use them even though you could if you wanted to. A
prime candidate would be title – however title comes with one
side-effect – when the user hovers the cursor over the element, the
title would be visible.
I chose the lang attribute because it is a universal attribute (valid
for all elements) that is not visible when hovered over. Naturally
we’re not using this attribute for its intended purpose – but there’s
a technical exception in the HTML specifications that allow us to use
it this way. By pre-pending the attribute value with an “x-”, this
signifies that the lang attribute is not meant to be meaningful to the
client and as far as I know, no email client currently processes the
lang attribute anyways.
Breakdown
Here’s a total breakdown of all the styles I’ve tried and found
working in Gmail:
The following works in Gmail:
* E[foo]
* E[foo="bar"]
* E[foo~="bar"]
* E[foo^="bar"]
* E[foo*="bar"]
* E[foo$="bar"]
* E:hover
* E:link
* E:visited
* E:active
E F
E > F
E + F
E ~ F
Summary of how Gmail processes CSS in a style tag (in the of the email).
.divbox {..} //Allowed but pointless - Gmail strips class attributes from elements
#divbox {..} //Allowed but pointless - Gmail strips id attributes from elements
[class~="divbox"] {...} //Removed by Gmail
* [class~="divbox"] {...} //Allowed but pointless - No class attributes
div {...} //Allowed but too generic to be useful
div:hover {...} //Removed by gmail. No pseudo class support? Not so fast!
* div:hover {...} //Allowed! Interesting…
* [lang~="x-divbox"] {...} //Allowed! Now we’re talking
* [lang~="x-divbox"]:hover {...} //Allowed! Magic! :)
Disclaimer: The article is not written by me, and I take no credit for it.
EDIT:
I tested it it works on both gmail and outlook (hotmail).
The code I used:
<html>
<head>
<style>
* [title="divbox"]:hover{
background-color: green !important;
color: white;
}
.blinking:hover{
background-color: green !important;
color: white;
}
</style>
</head>
<body>
<div class="blinking" title="divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</div>
</body>
</html>
PS: The blinking class is for hotmail, since it doesn't display the gmail workaround.
