Why CSS is not working when sending HTML email?

Question

As I am using SendGrid service at heroku, I've noticed that when I send HTML based emails, the CSS has no effect, can any one tell me what could be wrong ?

I tried to send it as html.haml, html.erb, but both didn't work, although the images are viewed correctly in the sent emails.

Any idea ?

Answer 1

Try using inline styles instead of an external stylesheet. Like this:

<div style="color:green;" id="div"></div>

instead of something like this:

<style>
    #div {
        color:green;
    }
</style>
    
<div id="div"></div>

(Thanks Kelvis Miho for pointing this out)

Edit: I searched for @Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .

Edit: Joe edited his post to include the reference link.

Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.

You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.