Rendering HTML emails with inline CSS using Jinja

Question

As you know, if you are going to send an HTML email, all CSS styling must be inline on the elements themselves e.g. <p style='font-family: Helvetica'>

Is there a way I can use Jinja to easily create HTML email bodies from Jinja templates without repeating CSS styles many times in a single template?

I think of setting these styles to variables e.g.

{% set FONT_STYLE = 'font-family: Helvetica; color: #111' %}

and then in the template I can do

<p style='{{ FONT_STYLE }}'>My paragraph here.</p>

Any better ideas? Maybe a library that resolves CSS rules that takes HTML content and CSS file and binds calculated CSS rules to the HTML elements one by one?

Answer 1

Look at premailer which turns CSS blocks into style attributes. You can get pretty html and convert it to email html with premailer.