2

I have a Django-powered WebApp that occasionally needs to send pretty HTML emails to my users.

I'm learning how to send HTML emails using Django. Here are the instructions I'm following. They are quite simple and good: http://www.djangofoo.com/250/sending-html-email

By following these instructions I'm able to send HTML emails. However, the emails I want to send should share the styles and look-and-feel of my webApp of course. Each Django template on my website includes a bunch of CSS at the top that ensures a consistent look. However, when I simply send that template as and HTML emails, the styles do not kick in in the email. Does CSS not work while sending HTML emails through Django?? Do I need to manually and explicitly set the fonts, colors, bold, italics, of each element in the HTML template I would like to use for the email? How do other people do this?

Saqib Ali
  • 11,931
  • 41
  • 133
  • 272

4 Answers4

2

CSS is very difficult to get right with html emails... The general rule is to use inline styles and try to stay as basic as possible.

This SO question has some good resources in it for guidance on designing html emails.

Community
  • 1
  • 1
DMac the Destroyer
  • 5,240
  • 6
  • 36
  • 56
2

Instead of manually setting all styles in the email, I tend to use the same CSS styles as the site if I want emails that should be pretty. However, emails need the styles inlined, and for that I use the inlinestyler module, which will take the HTML and the CSS files and set the relevant styles inline before sending the email.

There are still some things to think about, if you are careless you get gigantic emails because you use big style settings everywhere, and many email clients will not do positioning correctly etc. so you may have to make custom CSS styles for your emails anyway. But even if you do, inlinestyler is useful, as you get much more maintainable emails with the CSS and the HTML separate.

Lennart Regebro
  • 167,292
  • 41
  • 224
  • 251
1

CSS is supported by some email clients, and not supported by others. Some clients support inline styles and others do not. You can see a fairly verbose list here. Most of what can be done with HTML/CSS can be done with inline styles and (gasp) table layouts, but some of it is simply impossible. Tools like the one @Lennart mentioned are invaluable, but "just inline everything" doesn't accommodate for a number of issues. (Pseudo classes comes to mind as a major point (a:hover is supported by Outlook, while .classname:hover is not), as does background image (there is a hack to make that work though)).

I guess that my basic point is that you can try to shortcut the process by using inlinestyler or similar, but you are going to need to keep a separate set of files, and you'll definitely be doing a series of manual tweaks.

cwallenpoole
  • 79,954
  • 26
  • 128
  • 166
0

I think you will find that email clients will not retrieve the css.

Instead, in your email, put the contents of your CSS files directly into the email, with <style> and </style> around it.

Kevin
  • 53,822
  • 15
  • 101
  • 132
AMADANON Inc.
  • 5,753
  • 21
  • 31