CODEWITHSUNDEEP
htmlcssemail
user2986673
user2986673

Reputation: 171

send email with css style without using inline css

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?

Upvotes: 5

Views: 734

Answers (2)

Patricio Vargas
Patricio Vargas

Reputation: 5522

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:

enter image description here

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

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72849

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.

Upvotes: 3

Related Questions