How to Make CSS Play Nice in HTML Emails (Without Breaking Everything)

Customer.io on Apr 16, 2021

In the web world, CSS takes the headache out of formatting, styling, and more. But when it comes to email, CSS can cause more headaches than it cures.

The trick is to use CSS selectively—only when the benefits exceed the cost—and to do it an email-friendly way. It’s important to know that CSS can take a lot of extra effort and slow your time to market. It also creates greater deliverability, accessibility, and performance risks, which can cost you audience share.

While CSS support is increasing among email clients, using it still requires a cautious approach. This guide walks you through deciding when to use CSS—and how to do it well when you do.

How to break your emails with CSS (aka, don’t do these things!)

Email clients are famous for mangling CSS in a variety of creative ways. Don’t risk your emails arriving in a mess! Here are the things we recommend you avoid at all costs, and why.

Using CSS for layout. CSS just doesn’t work for email layout. Most email clients do not support CSS layout or will break your CSS layout—each in its own unique way. HTML tables may be old school, but they produce emails that look good across devices, and they are really the only way to go for email layout. However, you can use CSS for styling—more on that in the next section of this article.

To ensure your layout works well, dig into this guide on designing and developing HTML emails.

Using external style sheets. External style sheets are standard for websites, but they cause major problems with email. An external style sheet tells the email client to go to the internet, find a file, and load it. To the email client, that sounds like spam—so the link will most likely be blocked. That means you’ll be stuck with the client’s default formatting.

Using embedded styles in the <head> section. The advantage of CSS is that you can set your styles in one place, rather than styling each piece separately. Unfortunately, many email clients don’t support embedded styles and will strip the information out of the <head> section. Again, you’ll be stuck with those default fonts and colors.

Pro tip: in addition to knowing which of your core email clients do and don’t support CSS, it’s absolutely critical to understand that Gmail strips CSS from the head if it finds invalid CSS. If you’re unsure if the CSS in your head is valid, it might be safer to just inline it.
Tom Buchok, CEO of MailCharts

Failing to account for variations in CSS support across email clients. There’s no single way to do CSS for email, because CSS support varies widely among email clients. That means you’ll need to know what clients your customers use and what CSS support those clients offer. Start your research with this comprehensive resource from Campaign Monitor on CSS support among email clients. And, of course, make sure to test your email!

Why you might want to use CSS despite the risks

Despite its challenges, using CSS in your emails can provide some significant advantages. The two main use cases are styling and special elements.

Styling

CSS can give you more precise control over styling. Why? Well, there are a limited number of attributes for HTML elements. (Attributes are what let you modify appearance and behavior.) CSS layers on more styling options for the elements, as well as more control over how those options appear.

Note: While CSS can be useful for styling, we recommend that you don’t use CSS when you are sending an email that looks like it’s coming directly from an individual. A minimally-styled email feels more personal.

Special elements

CSS can open the door to special elements, including animations (instead of GIFs), HTML5 videos, and background images. Check out this guide to special elements in email for more details.

Ultimately, you must weigh the value of using CSS. You’ll want to look at the potential for increased conversion versus the costs: more time to market, more labor, more code to write and troubleshoot, and the need to mine data to determine whether target clients support the functions you want to use (or accept an unknown failure rate).

Whether you choose to go mobile first with your email templates or collapse a desktop-oriented layout into a mobile width—CSS will be critical to ensuring everything looks just right. A few of the common tricks you’ll need are centering/re-aligning text and images, swapping out images for different sizes, showing/hiding content, and adjusting font sizes.
Tom Buchok, CEO of MailCharts

If you decide to go forth, here are some smart approaches to making CSS work for you.

Smart CSS approach: Use inline CSS for styling

While we don’t recommend using external style sheets and embedded styles, using inline CSS styles can give you excellent styling control. You’ll want to use an inliner, which converts the CSS styles from the <head> section of your email code to inline CSS.

For example, Customer.io uses Premailer as part of our email preflight, which converts CSS styles to inline style attributes—it checks style and link[rel=stylesheet] tags and preserves existing inline attributes. It also converts relative paths to absolute paths (checking links in href, src and CSS url(”)) and checks CSS properties against email client capabilities based on the Email Standards Project’s guides.

Here’s what embedded CSS looks like:

<html>
    <head>
        <style>
            h1{ color: blue; }
        </style>
    </head>
    <body>
        <h1>A Blue Heading</h1>
    </body>
</html>

And here’s the same styling inline:
<h1 style="color:blue;">A Blue Heading</h1>

Want to test it for yourself? Go to Premailer and convert some embedded styles to inline—you can paste the embedded style in the text above see inlining in action!

Note: When you use an inliner, your email will look slightly different after inlining; the inliner tweaks your code to work inline. Make sure to test your email so you can troubleshoot any issues!

Smart CSS approach: Add special content… but only if it adds value

Sometimes special content can really drive conversion—and other times it makes more work for you without impacting audience behavior. The first question to ask when considering CSS for special content is: will this drive improved KPIs? If not, you’re better off leaving it out.

But sometimes special content is truly valuable. Here are the use cases where we think the extra resources to develop CSS may be worth it:

When seeing your product in action makes a difference, like a video game release or showing of a SaaS or app feature
When you have clear data that shows a certain element has a statistically significant impact on conversion
When 90% of your audience is using a client that supports the element

Background images, CSS animations, and HTML5 video are some of the most likely candidates for increasing engagement—here’s a dive into using these effectively.

Smart CSS approach: Think of it as an optional enhancement

You’ll get the best results with CSS if you think of it as an enhancement for email clients that can support it—and make sure your email delivers value even if they don’t. You can do this by using media queries.

A media query is a piece of code that asks the receiving email client about enhanced CSS-handling capabilities (one good option is a Webkit media query—Litmus has a good code example). If the media query detects that the recipient is running a Webkit-based email client, the enhanced code is delivered, and the email arrives with every bell and whistle in place.

If the email client says it doesn’t have Webkit, the basic code is delivered. Instead of a mangled CSS email, the recipient gets a simplified email that’s still true to your brand and goals.

So is it worth it to write the enhanced code? Once you’ve determined the enhancement could provide a good chance of increased conversions, it all comes down to knowing your audience.

Start by checking your data to see what percentage of your audience uses clients that support the elements you want to use. If 90% of your audience uses a Webkit client, adding CSS could be a great use of your resources. But if it’s a much lower percentage, you’ll likely find you’ve increased your risk and time to market for little benefit.

Know your why before you start the how

You can get great results with careful use of CSS in emails—and you want to make sure you’ve got a good reason before you commit the development resources you’ll need for it. Here are some tips to help you ace your next CSS challenge:

If a stakeholder is keen on something that’s high risk and/or high-time investment, run the numbers. What percent of your audience do you stand to lose if deliverability is impacted or your email gets mangled?
Don’t put style before structure! Make sure you’ve got a solid HTML foundation in place for email format before you add styles with CSS—and let your structure be your guide.
Test and learn. You should always test emails thoroughly before sending—and that goes triple when you’re incorporating CSS. Review your test results to develop best practices to guide your decisions going forward.
Compare soft and hard costs. If the CSS is worth doing, it’s worth doing right. The hard cost of using a vendor might outweigh the soft cost of your team’s time. Looking for support? Check out our partners page—we love matchmaking!

Back to Customer.io Blog