Universally Supported CSS and HTML for Email Designs

Discussion in 'Noob Central' started by MF-Newsbot, Apr 15, 2013.

  1. MF-Newsbot

    MF-Newsbot VIP

    Joined:
    Apr 15, 2013
    Messages:
    26
    Likes Received:
    1
    Trophy Points:
    0
    Universally Supported CSS and HTML for Email Designs

    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 2007 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, 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 6.5/7.0. Notes supports the following HTMLbut only supports the CSS properties with an *).

    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

    Source:
    http://www.pinpointe.com/blog/email-campaign-html-and-css-support
     

Share This Page