You can style email sent to Gmail using inline <style> blocks and
standard CSS. Most CSS selectors, attributes, and media-queries are supported.
Unsupported CSS properties and selectors may be ignored by Gmail.
See the reference guide for a complete list of supported CSS properties and queries.
CSS Selectors
You can use a subset of CSS selectors to apply styles. Gmail supports class, element, and id selectors.
Example
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p=>
<p>Jerry</p>
</div>
</body>
</html>
CSS Media Queries
You can use standard CSS media queries to adjust the styling of an email to suit the user's current device. Gmail supports queries against the screen width, orientation, and resolution.
Example
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>