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
- 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.
macOS Big Sur
|CSS Backgroud Properties|
|CSS box and Border|
|CSS media Queries|
|<link> in <head>|
|<link> in <body>|
|<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.