Why CSS is not working when sending HTML email?

Asked 29/12, 2012 at 20:25 Answered 10/9, 2022 at 8:45

Solved css ruby-on-rails-3 heroku html-email sendgrid

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 ?

Argybargy answered 29/12, 2012 at 20:25 Comment(0)

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.

Fredrickafredrickson answered 29/12, 2012 at 20:28 Comment(2)

@Argybargy Gmail only supports inline styles, so it is good practice to inline all css for html email. Also, avoid divs in favor of tables. – Bhutan 2/1, 2013 at 20:10

Rails Internal Style For Mailer Template Not Working – Gyrate 18/7, 2017 at 17:54

What you CAN'T do:

Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.

What you CAN do.

In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website.

from this site

Perdita answered 29/12, 2012 at 20:29 Comment(5)

that is why that is part of the "can't do" list. – Perdita 29/12, 2012 at 21:46

Also add display:block to img tags. – Kata 30/12, 2012 at 7:21

I would do the layout with tables. – Kata 30/12, 2012 at 7:24

@Perdita Background images do work, but not in elements (consistently). If you set it in both body tag (for Outlook) and a 100% with table (for Gmail etc), you can get a overall email background image to work across all major email clients. – Bhutan 7/1, 2013 at 17:38

Use backgrounds.cm for background images(full email or td) Works in like 99% of email clients(including all Outlooks). – Asshur 18/6, 2015 at 10:53

You need to use inline styles.

Kata answered 29/12, 2012 at 20:26 Comment(4)

I've used campaignmonitor.com/templates to generate the email template, I thought they would care about the inline styles, but it seems that I will have to fix it my self, do you know a handy tool that would convert CSS to inline style ? – Argybargy 30/12, 2012 at 5:59

1+, thanks, its strange that Google dose not support CSS at all inside HTML emails though .. – Argybargy 30/12, 2012 at 7:22

It supports it, but inline. – Kata 30/12, 2012 at 7:24

Campaign Monitor has a tool that auto inlines the CSS before sending through their service. This is why they always leave it in <style> tags. Personally, I just inline straight off the bat... – Bhutan 2/1, 2013 at 20:9

Make sure that you are putting internal style inside head tag

eg:

<head>
    <style type="text/css">
    ...
    ...
    </style>
</head>

Note: Only inline style and internal style (must be in head tag) supports.

Gyrate answered 12/3, 2018 at 10:39 Comment(0)

https://www.campaignmonitor.com/css/

shows all css support for popular mail clients. Also it appears that for the most popular gmail-client display:grid/flex is not supported

Petuu answered 10/9, 2022 at 8:45 Comment(0)

-1

To me, the premailer-rails gem works like a charm. You just need to add this gems to your Gemfile

gem 'nokogiri'
gem 'premailer-rails'

And all your emails will include styles from the assets folder. I usually create a email.css.less in the assets folder and then I include it on the <head> of the email like this

<%= stylesheet_link_tag 'email.css' %>

And also, when I need to include an image I found this helper that allows me to attach images into the email so they have logo and stuff.

module EmailHelper
  def email_image_tag(image, **options)
    attachments[image] = File.read(Rails.root.join("public/#{image}"))
    image_tag attachments[image].url, **options
  end
end

And in the .erb template

<%= email_image_tag "img/logo.png", :class => "some-class" %>

Hope it helps someone, Regards

Ruphina answered 17/4, 2016 at 20:10 Comment(0)

Recommended topics

Hot tags