CSS in HTML emails: How to get started (without breaking anything)

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

The trick is to use CSS selectively—only when the benefits exceed the cost—and to do it in an email-friendly way. Keep in mind: CSS can take a lot of extra effort and slow your time to market—something you’ll definitely want to consider when evaluating ROI. 

While CSS support is increasing among email clients, 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.

Here’s what we’ll cover:

• What is CSS for emails, anyway?
• Do you have to use CSS for HTML emails?
• How to break your emails with CSS (don’t do these things!)
• Why you might want to use CSS in HTML emails despite the risks
• 3 smart approaches to using CSS in email

What is CSS for emails, anyway?

CSS is a collection of guidelines for managing the visual presentation and styling of HTML documents, such as websites and emails. HTML establishes the fundamental structure and content in email design, while CSS helps dictate the visual look and feel. This encompasses color schemes, fonts, spacing, arrangement, and other stylistic elements of your email.

Do you have to use CSS for HTML emails?

Definitely not! You can get away without using CSS for most marketing emails. Of course, if you want to achieve a specific look or design for your HTML email, CSS is almost unavoidable. While a lot of styling can be accomplished with inline HTML attributes (more on that below), there will be times when you’ll want to use CSS for greater control over your email’s visual appearance.

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

Unfortunately, not all email clients support the same features and thus are famous for mangling CSS in various creative ways. Don’t risk your emails arriving in a mess! Here are the things we recommend you avoid when going the CSS route and why. 

Avoid using external style sheets.

External style sheets are standard for websites, but they cause significant 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 this might pose a security risk to the end user—so some email clients might block the link. That means you’ll be stuck with the client’s default formatting. 

Unfortunately, this does pose limitations for creating dynamic and streamlined email layouts. External CSS offers the advantage of centralized styling management. However, in the context of emails, the design and styling instructions that would have been conveniently stored in an external file must be embedded directly within the email’s HTML code. This can make it challenging to maintain consistency across multiple emails.

Don’t overlook CSS support variations 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.

Can I Email is one of our favorite tools for assessing which clients support CSS. You can even look at their repository for a detailed list of features they analyze when assessing CSS compatibility. Then, you can make the call if CSS is a worthwhile pursuit or not.

Don’t forget to test your emails!

Thoroughly testing your email before hitting the “send” button is essential to guarantee a seamless and polished user experience. The diverse landscape of email clients, each with its own rendering quirks and limitations, means that what looks perfect in one client might appear distorted or broken in another.

Email on Acid is a great tool for testing how your email appears across different email clients. 

Why you might want to use CSS despite the risks

Despite its challenges, using CSS in your emails can provide significant advantages. CSS can give your emails a professional and visually engaging edge and open the gateway to innovative elements like animations. But beware, you’ll need to weigh the pros and cons of every cool and flashy experience against its potential risk.

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 and more control over how those options appear.

Note: While CSS can be useful for styling, we recommend not using CSS when sending an email that looks like it’s coming directly from an individual. A minimally-styled email feels more personal—and can even help with conversions. For example, this recent case study from Parcel shows how a text-based email outperformed its designed email counterpart during the onboarding flow.

Special elements

CSS can open the door to special elements, including animations (instead of GIFs), HTML5 videos, and background images.  

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

3 smart approaches to using CSS in HTML email

Creating successful email campaigns involves making smart choices about how you use CSS, the styling language, in your emails. It’s not just about the technical stuff; it’s about knowing how CSS can affect how people engage with your emails. Let’s explore three clever strategies to get the most out of CSS in your emails.

1. Use inline CSS for styling

As we learned, external CSS and embedded CSS styles are not recommended for email, so making inline CSS styles is the best route for styling control. You’ll want to use an inliner, which converts the CSS styles from your email code’s <head> section to inline CSS. Doing so eliminates the reliance on external resources and ensures that the styling instructions are embedded directly into the email’s structure.

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.

The outcome of this process is an email with refined and inline CSS styles optimized for consistent rendering across many email clients and devices.

<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 and 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. Again, always make sure to test your email so you can troubleshoot any issues!

2. Use video, background images, and CSS animations only when they add value

Sometimes, special content can drive conversion; other times, it makes more work for you without impacting audience behavior. When considering CSS for special content, the first question is: will this drive improved KPIs? If not, you’re better off leaving it out. 

But sometimes, special content like HTML5 video, background images, and CSS animations are truly valuable and can help increase engagement. 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 off a SaaS app feature.
• When you have clear data that shows a certain element has a statistically significant impact on conversion.
• When the choice aligns with your brand identity and personality, your subscribers will expect a stylized email.

Of course, you’ll want to research the nuances of each special element for the best result possible. 

#3 Treat CSS as an optional enhancement with media queries

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 popular 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—like the Gmail app on iOS—the enhanced code is delivered, and the email arrives with every bell and whistle in place.

The basic code is delivered if the email client says it doesn’t have Webkit. 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 most 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:

• Calculate the risk. 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. 

Looking for more? Before you can begin delivering value with your emails, it’s important to have a thorough understanding of email deliverability. Otherwise, all that effort might go to waste if your email never actually hits the inbox! 

We cover all the dos and don’ts of email deliverability in our tutorial: Learn Email Deliverability. Check it out!