1

I have created a webpage to use as an email newsletter. I have used basic CSS and tables in the code. When I copy the content from the browser and paste it into the email compose page, the CSS is not being loaded.

I read a couple of other articles about Gmail not supporting the <style> tag, but I tried Yahoo! and Lotus Notes and it still had the same issue.

How can I make this work for Gmail and other mail providers?

I have put in my code in a dropbox folder: https://dl.dropboxusercontent.com/u/29654441/email_newsletter/email_newsletter1.html

moopet
  • 6,014
  • 1
  • 29
  • 36
Zeeshan Rang
  • 19,375
  • 28
  • 72
  • 100

2 Answers2

4

Gmail and other Web Browser-based email clients do not support <style> tags in the head section of the document (or a <head> section at all, for that matter) as they conflict with their page's CSS. You will need to move/duplicate your CSS inline as well.

e.g.:

<head>
  <style>
    a { color: #ff0000; }
  </style>
</head>
<body>
  <a href="#"></a>
</body>

becomes...

<body>
  <a href="#" style="color:#ff0000;"></a>
</body>

Some online tools can aid you with this, but they only support basic CSS. Chances are you'll need to do it manually, and remember to only style inline in the future.

Try http://premailer.dialect.ca/ or http://zurb.com/ink/inliner.php

mpdc
  • 3,550
  • 5
  • 25
  • 48
  • This is correct, except you should be using the 6-digit hex color code in html email. Check [this post](http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734) for CSS support chart, more inliner tools and a bunch of other html email resources to get you started. @ZeeshanRang – John Jan 30 '14 at 17:21
1

They don't support HTML email composing, they will show them when received but you will struggle to do it. You could do it through an IMAP client that allows HTML composing, or you could sign up for a service such as MailChimp.