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 : stackoverflow.com/questions/5293280/… (this isn't a duplicate, though)Denys Séguret– Denys Séguret2015-07-20 08:31:05 +00:00Commented Jul 20, 2015 at 8:31
-
use external css but in href make sure it is a full path link : like website.com/css/mystyle.cssMonnster– Monnster2015-07-20 08:39:10 +00:00Commented Jul 20, 2015 at 8:39
-
@Monnster: A large portion of the email clients block that.Cerbrus– Cerbrus2015-07-20 08:40:08 +00:00Commented Jul 20, 2015 at 8:40
-
ohh.. thanks cerbrus for that infoMonnster– Monnster2015-07-20 08:41:14 +00:00Commented Jul 20, 2015 at 8:41
Add a comment
|
2 Answers
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.
12 Comments
user2986673
thank you for your answer, i cost me 2 days to research on this and i think i should stop now hehe.
Gortonington
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.
Cerbrus
@Gortonington: Gmail won't. That's a pretty big player there.
Gortonington
Gmail will - but not the iOS app
Gortonington
see link: freshinbox.com/blog/…
|
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
