CSS in HTML Email
Supported CSS Attributes for 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.
