Close Menu
E-Mail Marketing

Email HTML and CSS: What will work in 2024?

HustlersDailyPay StaffBy No Comments5 Mins Read



Coding • Email DesignDaniel Schwartz • • 7 minute read

Perhaps one of the most exciting aspects of web development in recent years is the much more stable level of support for new HTML, CSS, and ECMAScript (JavaScript) standards across web browsers. However, the same cannot be said for email clients, despite the introduction of new features such as media queries, flex, and rem units.

Create an email template using Postcards Email Builder

Postcard: Email Template Builder

If you want to use CSS to style your emails, it's important to understand the limitations of email clients and their varying degrees of CSS support. This is a quick guide to CSS email support.

  • Take advantage of inline styles: Email clients require inline styles, rather than websites that frequently use external stylesheets. To embed CSS rules directly into the resulting HTML code, you must use the “style” tag.
  • Ensure simplicity: We recommend adhering to basic CSS properties such as font size, color, and background color. This is because not all of these are supported by your email client. Avoid unnecessary complex features such as shadows, gradients, and animations.
  • Use tables for layout: Even though modern online designs rely primarily on CSS for layout, tables are still heavily used in email design. Use tables instead of floats, flexbox, or grids to organize your email layout.
  • Test your emails to ensure they look good on all platforms, considering the different email clients and devices available. You can check your email's CSS compatibility using tools like Litmus and Email on Acid.
  • Employ fallbacks: It's a good idea to have fallbacks in case your email client doesn't support certain CSS attributes. For example, you can provide a more commonly supported fallback font in case the client doesn't support her web fonts.

These recommendations will help you create engaging and efficient emails that work in most email clients. To ensure optimal compatibility, remember to test your email frequently and change the CSS as needed.

Let's take a look at some of these features and how they can work across all email clients in 2024.

Internal CSS

Without a doubt, one of the most tedious aspects of composing an email is the lack of style attributes (e.g.) is required to declare styles (also known as “inline CSS”) for each element inside. '.

Fortunately, internal CSS (i.e.