Default CSS in Web & Desktop Email Clients

It's important to beware!

It comes as no surprise that web clients use their own style sheets to render their pages. In the new version of Yahoo Mail and AIM Mail, emails are rendered inside an I-frame allowing for a fairly clean slate. However, in clients like G-Mail, Hotmail and Yahoo-Classic, they seem to make an attempt to reset browser defaults but several of their self-imposing styles are still carried over.

This issue may actually challenge the notion that you are always safe using the basics when it comes to tables and divs. In fact if you didn't know that you needed to overwrite certain styles using embedded or inline CSS, your end result may look much different than expected.

For example, Hotmail applies a margin value to its p, h1-h6, ul, and li elements and ironically they don't support the "margin" property in the rendered email itself. Fortunately they do support "margin-left," "margin-right," and "margin-bottom." In this instance, if you are using a background color or inserting images in any of these elements and you don't set a value for the above properties, you may see unwanted spacing in the end result.

As luck would have it, web clients are not the only ones using default CSS. Most desktop clients use them as well. We hope you can read through our sarcasm here.

Simulating the so called "default" CSS for each email client wasn't a huge problem for us. It was mostly just a matter of being rather tedious and time consuming and as we continue to run test after test, we are sure to refine them as we go.

When we started this Email Test project, we where obviously aware of the current challenges of testing an email in each of the popular clients, but when doing this type of research we find that it may be even more important than we had originally thought. We even ran several high profile corporate emails through our test and saw that default CSS played a big roll in the final output.

That said, we will conclude by repeating the phrase "It's important to beware!"