Why CSS Is Not Working When Sending HTML Email

Why CSS is not working when sending HTML email?

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.

div CSS not appearing in the html body of email in python flask?

Did you tried to open this email in another email software? I've asked because Outlook is known for its weird rendering. There is recommendation for email templates: forget about <div>, use <table> instead.

HTML email doesn't work :/

Outlook doesn't support background opacity.

The code you supplied works as a website (as you said), but unfortunately will fall apart in most email clients (not just Outlook). Emails need to use <table>s for layout instead of <div>s. Flexbox won't work in emails, either.

Email code looks more like this:

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;background: #aaaaaa;">
      <span style="color: #333333;">text</span>
    </td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;">
      <img src="full path to image" alt="alt text" width="50" height="50">
    </td>
  </tr>
</table>

If you rebuild your email by replacing <div>s with <table>s while using CSS that email clients support, this should solve your display issues in Outlook and everywhere else.

---

Related Topics