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.

Gmail Email Preview, Hotmail Preview, Yahoo Preview

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!

38 thoughts on “Default CSS in Web & Desktop Email Clients”

  1. This is really informative article.We get many emails from customers who would like to use CSS in their email newsletters, particular when creating their stationery and templates for MailList King. CSS (Cascading Style Sheets) are widely used when creating web pages and allow improved styling and layout of HTML content. Unfortunately, email isn’t the web. Your design may look great in one email client, but chances are it will be different in other email clients.

  2. hopefully someday soon css will become the standard in email design, but with new desktop and web clients being released css support still seems to be lacking. I can almost understand the reasons why web based clients have the need to drop support, but for desktop clients surely full support can be introduced

  3. 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.SEO Web design

  4. Very important tutorial! Yiya, mate Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up!

  5. E-mail css formatting can be one of the most frustrating things to do. It’s so strict – especially with pictures. Text ain’t so bad.

  6. Very Polite stuff definitely! I find here few points which are truly effective tutorial point. By catching this issue you published very useful information. Thanks!

  7. You have provided very good information in details regarding this topic. It is really very useful. Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up! Cheers

  8. E-mail css formatting can be one of the most frustrating things to do. It’s so strict – especially with pictures. Text ain’t so bad.

  9. Effective and informative post! The dealing point with Default CSS in web & desktop email clients i.e. G-Mail, Hotmail and Yahoo-Classic. Their mistake follows up here though we should teach from the content.ecommerce software

  10. About “Default CSS in Web & Desktop Email Clients” whatever you shared here seems to me pretty outstanding from all side. Thanks mate. 🙂

  11. Very important tutorial! Yiya, mate Default CSS in web and desktop email clients is highly impressive stuffs. Thanks for review. Keep it up!

  12. Very thought provoking input man. I’m so pleased by reading this post and whatever mistake follows up here though we should teach from the content. Thanks

  13. I too have felt the same difficulty with Outlook on my computer. I do hope the programmers avoid that feature so as to make it more user personalized.Could you please let me know if you happen to get a work around?

  14. I really like your post. Thanks so lot for your convene. I’m very fired up to show it to anyone. Thanks so much with this fantastic post.

  15. The differences in standards can be rather annoying, especially when your going for a specific look, from a development perspective, anyway excellent post. Bill Phills

  16. Really a good information on default CSS of web and desktop clients. Thanks a lot for the share. Keep it up!

  17. Nice post about CSS, sometimes different browsers also have different settings that others don’t for example Firefox has some that start with MOZ- and I believe Chrome has the same as-well but it has been a while since I worked on any real CSS.

  18. I appreciate to your current work in shape of article. Best written and easy to learn.
    Thanks for the useful sharing.

  19. I’m glad I found your article. The information is smart and interesting. I am unable to thank you enough for the blog posts on your web page. I know you add a lot of time and energy into them and truly hope you know how deeply I enjoy it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies