Make CSS inline in C# and ASP.NET using PreMailer.Net

Being able to make CSS inline is something you need all the time when sending HTML e-mails. HTML E-mails simply don’t render perfectly in all e-mail clients if you don’t make all your styles inline.

Campaign Monitor introduced the ability to make CSS inline years ago, and it just works. They use the premailer Ruby project to do this, and it seems to work perfectly. You can edit your HTML e-mails using styles embedded inside the HTML document’s <head> tag, and they automatically make the CSS inline on all elements that match your selectors.

At the end of my latest blog post on How to Send HTML E-mail from an ASP.NET MVC Controller, I wrote that I’d like to combine the ActionMailer.Net library with the premailer Ruby project, to be able to send great HTML e-mails from an application, that renders well in all e-mail clients.

I honestly didn’t want to combine ASP.NET MVC with a Ruby project. I can’t image all the hacks necessary to make it work. Eventually, I’d probably start a process from ASP.NET that runs the Ruby script – but it’s still a hack in my opinion.

That made me search the .Net community to see if I could find anything similar for .Net, but I didn’t succeed. But instead I found two interesting things:

And that is exactly what it takes to make CSS inline. I added code to the CSS parser, so that it would merge the style block, if an element already had inline styles specified, and packed the two project into my own solution, called PreMailer.NET.

It works like this:

string htmlSource = File.ReadAllText(@"C:\Workspace\testmail.html");
PreMailer pm = new PreMailer();
string premailedOutput = pm.MoveCssInline(htmlSource, false);

The premailedOutput variable contains e-mail mark-up ready to send.

For more information on how to create HTML E-mails, check out the HTML E-mail Boilerplate, and Campaign Monitor’s blog, and resources section.

  • http://www.facebook.com/rick.dorris Rick Dorris

    Great package. Do you know of a way to process html that references external css files? I see in your code that it looks for style tags, but our html file references an external css for all styles.
    Thanks,
    Rick

  • http://www.milkshakecommerce.com/ecommerce-blog Martin H. Normark

    Hi Rick.

    It doesn’t support external files at the moment, but feel free to create a feature request on Github: https://github.com/milkshakesoftware/PreMailer.Net/issues?sort=created&state=open&direction=desc

  • http://www.facebook.com/simon.weaver.754 Simon Weaver

    the nuget package for this has versions 1.1 and 2.0 at the current time.
    2.0 is showing pre-release. is this the preferred version to use?

  • http://www.milkshakecommerce.com/ecommerce-blog Martin H. Normark

    Yes, the prerelease package is the preferred one.

    It fixes a lot of known issues, but are still not fully baked – hence the pre state.

  • Marja Ribbers

    Just found your PreMailer. Thank you, thank you, thank you! :-)

  • Marja Ribbers

    Just found out that CsQuery (which is used by PreMailer) has issues in medium trust environments.

    Our web application needs to run in shared hosting environments, thus often under medium trust, so now we can’t use PreMailer.

    :-( :-(

    Are there any other libraries like PreMailer that don’t depend on full trust?

  • http://martinnormark.com/ Martin H. Normark

    I don’t know of any .Net libraries for this task. But you can use the API of the original Ruby gem here: http://premailer.dialect.ca/api