csshtml-email

CSS in HTML Email


I need to update an old email template. In the old template, which are like 4-5 years old, I found stuff like

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="bodyTable">

Now I am not sure why they used the those syntax, just because it is old, or is there any other mail-template related reason? Can I change them without any concern into, let's say:

<table style="text-align:center;border:0;height:100%; width:100%" class="bodyTable">

If not, can someone maybe explain to me why?


Solution

  • It is, or at the least was, the recommended style for HTML emails. For instance, "HTML attributes instead of CSS" are advised by Smash Magazine. While CSS support is gradually improving, there is no universal HTML email standard, so each email client supports its own subset of HTML/CSS. Thus, email designers are often advised to "think XX century" or even post-process their email templates with special inlining/downgrading tools, such as http://premailer.dialect.ca (and a few others).

    I'd say CSS has been well supported by major email clients for several year, yet, say in 2011 I find occasional stackoverflow complains of gmail stripping styles attributes HTML email in Gmail - CSS style attribute removed.

    So I guess authors opted to play save. It is not uncommon for companies to care even of users stuck with somewhat outdated software.

    According to this list, the major and current email clients support the style attribute well. Still, there is always a risk that a particular tag, attribute, or their combination are not supported by a less know email client, sometimes due to a bug or a corner case, as you can see in a relatively recent post regarding Spark client HTML Email formatting stripped out.