How to apply css to html so that it shows as the style property

Question

I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:

<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>

<h1>Title</h1>
<p>Content of the email</p>

It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:

<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>

Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?

Answer 1

I want to write an application that sends html formatted email

Never do this. Email MUST be plain text. You cannot even rely on attachments.

Answer 2

Drop the style tag, use inline styles.

Answer 3

This is what you're looking for:

http://www.mailchimp.com/labs/inlinecss.php

Hope this helps!