send email with css style without using inline css

Question

I am trying to send an email that will contain a table with some css style and I can not use inline css because of some selectors (after, before).

Is there any way to solve this problem?

Related : http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles (this isn't a duplicate, though) — Denys Séguret, Jul 20 '15 at 08:31
use external css but in href make sure it is a full path link : like http://website.com/css/mystyle.css — Monnster, Jul 20 '15 at 08:39

Cerbrus · Accepted Answer · 2015-07-20T08:52:57.593

3

Some email clients ignore <style> tags in the head of an email, so that isn't a reliable option. Linked CSS files? Even more unreliable, stylesheets like that are ignored by a large portion of the email clients out there.

Frankly, the only reliable method of applying styling to your email, is to use inline CSS.

As a result, I'm afraid the answer to your question is that it's not possible to reliably style your emails, without the usage of inline CSS.

You'll have to figure out a way to use "normal" html elements to emulate the behavior of selectors like :before.

edited Jul 20 '15 at 08:52

answered Jul 20 '15 at 08:37

Cerbrus

70,800
18
132
147

2

thank you for your answer, i cost me 2 days to research on this and i think i should stop now hehe. – user2986673 Jul 20 '15 at 08:45
if you use selectors on elements in the style tag at head of an email (e.g. a:hover {background:#FFFFFF;} , a large portion of email clients (even Gmail! but not the app) will respect it (except the outlooks, etc). Not horribly useful, but figured it might be a good reference in helping find a work-around for you. – Gortonington Jul 21 '15 at 13:52
@Gortonington: Gmail won't. That's a pretty big player there. – Cerbrus Jul 21 '15 at 13:53
Gmail will - but not the iOS app – Gortonington Jul 21 '15 at 13:54
see link: http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/ – Gortonington Jul 21 '15 at 13:54
Still pretty significant, then. That aside, it's not possible to "hover" on touch screen devices. – Cerbrus Jul 21 '15 at 13:55
Yes, and as I stated, it is not horribly useful, but if they are ok with having multiple experiences depending on client, it can help expand the higher level interactivity into a larger audience. – Gortonington Jul 21 '15 at 13:57
sorry i used hover as an example, I just did the first selector I could think of off top of my head. There are obviously mobile friendly selectors out there. Just substitute one of them for my example. I mean dude, I am not trying to say you were wrong, just give info that may assist him in finding an alternative solution. – Gortonington Jul 21 '15 at 13:59
Your first comment is basically saying the OP should do what the first line in my answer says isn't a reliable solution: _"Some email clients ignore – Cerbrus Jul 21 '15 at 14:04
just because it doesn't work in some clients doesn't mean you can't use it for the ones that do work. The experience can be different as long as you have backups to allow for quality rendering in those that do not support. Should you inline your basic styles? yes 100%. Does this mean you CAN'T add styling in a style tag in the head to allow for a more involved experience in the email clients that accept these? no. the email does not need to be a singular display and interactivity across all clients. – Gortonington Jul 21 '15 at 14:37
To not get into a(n even larger) flame war over comments on someone else's post, this is my last comment. This link shows the capabilities of emails beyond inline styles. With a graceful degrade, you can provide amazing things to most, but still have a beautiful alternative for those that cannot use it. http://freshinbox.com/blog/the-dawn-of-kinetic-email/?utm=mc – Gortonington Jul 21 '15 at 14:45
@coderpatomx yea, sadly, some commonly used email clients still suck. – Cerbrus Jul 17 '20 at 15:21

Patricio Vargas · Answer 2 · 2020-07-17T19:32:56.413

Things have changed in the passed years. You can do embedded css, do inline or event import external files. Keep in mind what email providers support this:

Image source: https://www.litmus.com/blog/do-email-marketers-and-designers-still-need-to-inline-css/

In my case when working with a AWS Lambda function(NodeJS essentially) I did this:

TEMPLATE.JS

const css = require('./styles');
const generateTemplate = ({ name, from, title, company, siteUrl, report }) => {
    return `
          <html>
            <head>
              <style>
               ${css.styles()}
              </style>
            </head>
                <body>
                  <h2>Message sent from email ${from} by ${name} XXXX app.</h2>
                  <p>Title: ${title}</p>
                  <p>Company: ${company}</p>
                  <p>Site Url: ${siteUrl}</p>
                </body>
            </html>
          `
}

module.exports = { generateTemplate };

STYLES.JS

const styles = () => {
    return `
      h2 {
          color: red;
      }
    `
}

module.exports = { styles };

Then I just called my generateTemplate() when I'm using the email sender solution like nodemailer etc in my case is AWS SES service

send email with css style without using inline css

2 Answers2