CODEWITHSUNDEEP
htmlcss
contactmatt
contactmatt

Reputation: 18630

Is there a tool to take css classes and make them inline?

This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.

Example:

<html>
<style type="text/css">
   .p1 { height: 10px; }
</style>

<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>

Keep in mind there can be many CSS classes, and many can belong to a single element.

Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.

Upvotes: 3

Views: 243

Answers (2)

samanthasquared
samanthasquared

Reputation: 1937

MailChimp has a page for this in their labs, the CSS Inliner - http://beaker.mailchimp.com/inline-css

It does leave the class, however.

Upvotes: 2

Sean Vieira
Sean Vieira

Reputation: 160073

You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).

There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.

Upvotes: 3

Related Questions