HTML and CSS in Email Design
If you’re creating HTML emails – then here’s a table you’ll want to bookmark. If you’ve followed our blog – you know that top email clients like Gmail and Outlook and beyond only support about 50% of all html and css. That’s why your well crafted email design that follows otherwise best-practices for website design – just might look.. well, really bad.
Below – with help from www.emailonacid.com – we’ve summarized the universally supported html and CSS tags. These can be used and will render properly in any email client (excluding Lotus Notes. Notes supports the following HTML but only supports the CSS properties with an *).
Pinpointe customers can use our email campaign preview tool to check and validate HTML before sending. The inbox preview tool previews emails in 40+ top email clients and points out HTML and CSS code that won’t work correctly. Also note – the CSS properties below should be used INLINE (not in an embedded style sheet, but with a style=”…” directive), since some clients like Gmail strip embedded style sheets.
UNIVERSALLY SUPPORTED CSS PROPERTIES (INLINE ONLY) |
||
| background | background-color | border |
| border-bottom | border-bottom-color | border-bottom-style |
| border-bottom-width | border-color | border-left |
| border-left-color | border-left-style | border-left-width |
| border-right | border-right-color | border-right-style |
| border-right-width | border-style | border-top |
| border-top-color | border-width | * color |
| * display | * font | * font-family |
| * font-size | * font-style | font-variant |
| font-weight | height | letter-spacing |
| line-height | * list-style-type | padding |
| padding-bottom | padding-left | padding-right |
| padding-top | table-layout | * text-align |
| * text-decoration | text-indent | text-transform |
| vertical-align | ||
HTML TAG |
ATTRIBUTES (UNIVERSALLY SUPPORTED) |
| a | class, href, id, style, target |
| b | class, id, style |
| br | class, id, style |
| div | align, class, dir, id, style |
| font | class, color, face, id, size, style |
| h1 | align, class, dir, id, style |
| h2 | align, class, dir, id, style |
| h3 | align, class, dir, id, style |
| h4 | align, class, dir, id, style |
| h5 | align, class, dir, id, style |
| h6 | align, class, dir, id, style |
| head | dir, lang |
| hr | align, size, width |
| img | align, border, class, height, hspace, id, src, style, usemap, vspace, width |
| label | class, id, style |
| li | class, dir, id, style, type |
| ol | class, dir, id, style, type |
| p | align, class, dir, id, style |
| span | class, id, style |
| strong | class, id, style |
| table | align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width |
| td | abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width |
| th | abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width |
| tr | align, bgcolor, class, dir, id, style, valign |
| u | class, id, style |
| ul | class, dir, id, style |
