Universally Supported CSS and HTML for Email Designs

Editor
Editor

Table of Contents

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

 

Design
Editor

Editor

He does not need any intro. Your know that he will only edit blog posts when it's needed.

You might also like

Tips for Email Localization: Upgrading Your Global Email Marketing Members Public

Email marketing, out of all marketing strategies, is still a dominant force in marketing. Many organizations have gone global and require the ability to take their email marketing campaigns to the global stage. If this is the case for your company, there’s a lot of things you need to

Craig
Design

When Emails Get Ultra Personal | How to Segment Your Customers Using Psychographics Members Public

Email personalization is everywhere around us in marketing, especially in email marketing. There have been many takes on email list segmentation already, with a focus on stats and technology. We’re going to look at things a little differently now and focus on the psychographics of segmentation. Get ready for

Craig
Design

Authors →

Craig

Editor

He does not need any intro. Your know that he will only edit blog posts when it's needed.

Bill Crane

Bill diligently helps Pinpointe customers get the most out of their email campaigns.