Though you can definitely use CSS (Cascading Style Sheets) for HTML email styling, there are a few restriction that an e-mail template developer should be aware of. The short version is: use CSS preferably inline and mainly for simple elements like color and fonts.
Some rules of thumb:
- Don’t use CSS for positioning.
- Yse CSS for fonts and colors.
- Be aware that WYSIWYG editors might add not supported styling elements.
- Use CSS preferably inline only, though support for embedded styles in the email <head> is growing.
- Always test your layout and styling using the available tools.
The CSS attributes below are supported by most popular e-mail clients:
- Color
- Font-size
- Font-style
- Font-weight
- Text-align
- Text-decoration
- Background-color
- Border
- Font-family
- Font-variant
- Letter-spacing
- Line-height
- Padding
- Table-layout
- Text-indent
- Text-transform
There are some excellent tools to convert CSS from embedded to inline, like this one. Click here for a full list of supported elements.
