CSS and e-mail clients: compatibility issues

In several email clients (e.g. Microsoft Outlook, Lotus Notes, etc.) Cascading Style Sheets are not interpreted as they are by a Web browser. Therefore, they cannot be used as they would be in a Web page.

Specifically, there are certain style definitions that are not supported, and - more importantly - only inline styles are taken into account. All other CSS (e.g. styles defined at the top of the page or in an outside *.css file) are ignored by many email clients, including a popular system like Gmail.

Ironically, best practices for designing Web pages must be ignored when creating an HTML email message. For example, HTML tables must be used for the layout of the email, and deprecated HTML tags (e.g. "hspace","vspace", "align", etc.) are actually the ones that provide the best results.

Useful resources:

In addition to limited support for cascading style sheets, please note that there are other elements that are often not supported, but are commonly used in Web pages. These include:

  • HTML Forms
  • Background images
  • ActiveX components
  • Adobe Flash animations
  • Animated GIFs
  • JavaScript
To recap:
  1. Avoid using the elements mentioned above
  2. If using CSS, always define the styles inline (learn more)
  3. There are some styles that may not be supported, even inline, such as background images