Premailer.io

CSS blocks into inline style attributes for HTML emails

Anchor links (e.g. <a href="#anchor">) stay unchanged.

Leave img tags with src value starting with cid: as is.

Drop selectors like :hover in style attributes.

After having turned every style tag's content into inline elements, should it leave the style tag in the HTML document.

Whether any selector containing a * should be included.

Since class attributes on nodes should no longer be necessary, we can remove them afterwards.

Remove all !important markers on CSS selector values.

Additional CSS style sheet URLs to load in. One per line.

If using External styles above, this sets an extra prefix to each external style line if it's not an absolute URL.

Similar to External styles above but your own free-text chunk of extra CSS.


HTML   XML

Determines which parser lxml will use to parse and stringify the document.

Enter selector keys you do not want to become basic inline attributes. For example bgcolor. One per line.

Sent to cssutils when it parses the found CSS strings.

Relevant if you send the same block of CSS repeatedly into cssutils to be parsed.

If you have no <head> and don't want it to try to insert the remaining style into the head.

Images with float:left or float:right gets an extra align="left" and align="right" attribute.

For CSS property/value pairs with a value of unset the property is removed.

Whether or not it should be allowed to download external stylesheets from the network.

Outlook.com struggles with selector keys like float and margin-* unless they're capitalized.

Preserve things like <a href="\{\{ data | default: "Test & <code>" \}\}"></a>

Oh snap!
{{ error }}

Results

{{ ::results.warnings }}
{{ ::results.html }}

That took a whopping {{ results.took | number:1 }} milliseconds {{ results.took / 1000 | number:1 }} seconds to convert.
The resulting HTML is {{ results.html.length | filesize }}.

Server Error

Something horrible happened. I think.

Basically, we weren't even able to make a server query. 

{{ serverError }}

About this web app

Premailer is a Python library based on libxml which can analyze a HTML document and extract its CSS style sheets and then for all CSS seletors defined, it finds the DOM nodes and puts style attributes in instead.

This website is an example implementation of that library that you can test in a browser without having to install anything.

Read the original blog post about this site: https://www.peterbe.com/plog/premailer.io