CSS in HTML Email

Supported CSS Attributes for HTML Email.

Evgeny Fedosov

Chief Executive Officer, Co-founder

Dec 16, 2020

CSS in HTML Email

Email providers have a complex relationship with CSS. Some CSS attributes are supported, and some are not. Some mail clients may respond differently to the same attribute. Creating a responsive email template for such conditions turns into a rather complex task that requires very careful use of CSS.

It will not be a big discovery for email developers that there are a number of strict rules in using CSS to create email templates, the general meaning of which is as follows: use CSS preferably inline and mainly for simple elements like color and fonts.

Here are some basic rules for using CSS in email design:

  • Don't use CSS for positioning.
  • Use CSS for fonts and colors.
  • Use CSS preferably only online, thanks to the growing support for built-in styles in email <head>.
  • Always preview your layout and style using email template testing systems.

To simplify your work creating email newsletters, I have prepared for you a table of frequently used CSS properties supported by the most popular email clients and applications.

Gmail Outlook.com Apple Mail
macOS Big Sur
Outlook iOS 14
Mail App
Yahoo! Mail Android
Gmail
Android
Mail app
CSS Backgroud Properties
background-color
background-image
background-position
background-repeat
backgroung-size
CSS box and Border
border
border-image
border-radius
box-shadow
height
width
max-width
min-width
CSS media Queries
@media
(max-device-width)
(min-device-width)
(max-width)
CSS Text
@font-face
direction
font
font-family
font-style
font-variant
font-size
font-weight
letter-spacing
line-height
text-align
CSS Table
border-collapse
border-spacing
empty-cells
Link Element
<link> in <head>
<link> in <body>
HTML
<audio>
<canvas>
<iframe>
<img srcset>
<picture>
<video>
Style Element
<style> in <head>
<style> in <body>

Using CSS to define the style of your email template may cause difficulties and errors in displaying your newsletter on recipients ' devices. Therefore, I strongly recommend using modern HTML email template editors, which will help you avoid errors and test the template you created before sending it.