How to Style Emails

Best practices for styling HTML emails

Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.

You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.

How to created a responsive html email template

You are encountering two different email bugs here, one in Gmail, and the other in Yahoo. Here’s what’s going on and how to fix it.

1. Gmail

Gmail is very picky about certain styles. And whenever Gmail sees something it doesn't like, Gmail will remove the entire <style> tag that contains the problematic style. You can read more about how Gmail removes styles that include special characters here. In order to find what was wrong with your code, I split your one and only <style> tag into multiple ones. Then I sent myself the email and inspected the code in Gmail, and looked at what Gmail kept. I was then able to conclude that what Gmail doesn't like with your code are the box-shadow declarations with the / syntax.

.detail_table{
    width: 100%;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    border-spacing: 0;
}
.detail_table .header{
    font-size: 16px;
    font-weight: 700;
    text-align: start;
    padding: 8px;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

The solution here is simply to isolate the problematic styles in their own <style> tag. So remove the two box-shadow declarations from your giant <style> tag, and add a second <style> tag with only the following:

.detail_table{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .header{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

2. Yahoo

I'm assuming you're testing on Yahoo Android. On Android, Yahoo removes content from the <head> tag. (You can read more about this here.) But it only does so for the first <head> tag inside an email. I know what you're thinking, HTML usually has only one <head> element anyway. But turns out we can add a second <head> tag, and Yahoo will keep the content inside this second <head>. So the general practice for this, to get responsive emails to work in Yahoo on Android, is to add an empty <head> tag first, and then a real <head> with all your content second. Surprisingly, this is very well supported across email clients and rendering engines. Here’s an example:

!DOCTYPE html>
<html>
<head></head>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Order</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    /**
    * Avoid browser level font resizing.
    * 1. Windows Mobile
    * 2. iOS / OSX
    */
    body,
    table,
    td,
    a {
        …
    }
    </style>
</head>
<body>
…
</body>
</html>

Also note that Yahoo has a bug with CSS comments and it’s usually a good practice to remove all CSS comments before sending an email.

CSS in HTML Email

It is, or at the least was, the recommended style for HTML emails. For instance, "HTML attributes instead of CSS" are advised by Smash Magazine. While CSS support is gradually improving, there is no universal HTML email standard, so each email client supports its own subset of HTML/CSS. Thus, email designers are advised to 'think 99' or post-process their email templates with special inlining/downgrading tools, such as
http://premailer.dialect.ca (and a few others).

I'd say CSS has been well supported by major email clients for several year, yet, say in 2011 I find occasional stackoverflow complains of gmail.com stripping styles attributes HTML email in Gmail - CSS style attribute removed.

So I guess authors opted to play save. It is not uncommon for companies to care even of users stuck with somewhat outdated software.

According to this list, the major and current email clients support the style attribute well. Still, there is always a risk that a particular tag, attribute, or their combination are not supported by a less know email client, sometimes due to a bug or a corner case, as you can see in a relatively recent post regarding Spark client HTML Email formatting stripped out.

Applying HTML formatting in email's body

When I've done this, I've typically embedded the CSS in the body of the email:

<html>
<head>
<style type="text/css">
span.orange
{
    color: #FF6D06;
    ...
}
</style>
</head>
...

Avoid referencing external entities (like stylesheets, images, etc.) in HTML email. Those references may not be available, depending on the user's mail agent settings. Also, learn about the HTML support in mail agents. It may not be as rich as you expect. Here's some information on Outlook, for instance.

Styling html in email

As far as the email client is concerned the HTML in an email begins with <body>. All styling must be done inline, unfortunately email clients don't behave the same way browsers do. There is some good information available here:

Styling HTML email for Gmail

The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!

For reference, you can check the official gmail CSS docs.

As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.