Email newsletter not loading css

StackOverflow https://stackoverflow.com/questions/21428812

Question

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

Was it helpful?

Solution

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top