HTML and CSS in Emails: What Works in 2022?

Email Design • HTMLDaniel Schwarz • March 10, 2022 • 6 minutes READ

Arguably, one of the most exciting aspects of web development in recent years has been a significantly more consistent level of support for new HTML, CSS, and ECMAScript (JavaScript) standards amongst web browsers. However, the same cannot be said for email clients despite the introduction of fresh features such as media queries, flex, rem units, and more.

Let’s take a look at some of these features and how we can make them work for all email clients, in 2022.

Internal CSS

Undoubtedly, one of the most annoying aspects of creating emails is having to declare styles for every individual element within its style attribute (for example ), otherwise known as ‘inline CSS’.

Luckily, internal CSS (i.e. styles written within a

However, while the days of styling using ancient XHTML attributes (e.g. ) are over, support for internal CSS isn’t as high as we’d like it to be, so many email developers still choose inline CSS depending on the target audience.

It’s worth noting that some features (e.g. media queries and custom fonts) can’t be ‘inlined’, so a common approach to coding emails is to use internal CSS for progressive enhancements only and inline CSS for everything else (unless you’d be willing to forfeit custom fonts and cool layouts, of course).

It’s not an ideal approach, but it is what it is.

Note: external CSS (i.e. the method) only works in 21.21% of today’s email clients, which is a huge shame because it somewhat rules out creating email design systems.

Media Queries

Internal CSS allows us to use media queries, a necessary component of responsive design. Without media queries, emails can end up looking dreadfully linear, and while there’s absolutely nothing wrong with that from a minimalist viewpoint, a vertical design won’t be the right choice in every scenario.

Media queries only work in 75.75% of modern email clients so we recommend designing responsive layouts that degrade into vertical layouts very gracefully.

Additionally, there are some rules to remember…

• Avoid nested media queries
• Limit conditions to screen, min-width, and max-width or omit them entirely (@media { … })

As mentioned before, media queries can’t be used inline. They must be used within a