email-css-resets

A repository to hold all CSS resets/normalisation from past and present email clients.

The aim of these CSS files is to record CSS in use by email developers to normalise the behaviour of HTML elements across email clients.

There are two types of CSS -

1. General CSS normalisation

CSS that will affect change needed across email clients to normalise behaviour.

For example:

table { border-collapse: collapse; }

With all emails currently needing to include the table HTML element, even if only for Outlook, the overall normalisation to collapse table borders will stop gaps appearing between tables and cells.

2. Email client specific CSS

CSS that will reset/override specific styles an email client will force on HTML elements.

For example:

u + .body a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  }

The above CSS targets link attributes in Gmail - to match the parent element. Gmail will change links to blue and add an underline, without the email developer adding those attributes. This CSS 'reset' sets the color and font attributes to inherit from the parent element and not to have an underline.

Two main files -

Old CSS resets
Current CSS resets/normalisation

I would love anyone to send updates / pull requests with any CSS resets they find in old templates or know of?

Thanks to Ted Goas for updating the read me to look much better!

Contributors: Mark Robbins, Rémi Parmentier and hat tip to Cosmin Popovici who has created email-normalize an npm package to use email normalise and reset CSS in builds.