Flatten css into html for email purposes

Folks,

I use basic html/css to construct a page that I want to email.  I've read in a number of places that email clients don't handle css very well.  Is there a way to flatten the css into the html to generate a pure html page that can be emailed?
LVL 1
sfun28Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
The only thing you can do is use inline CSS along with tables.  My company and I send out mass mailings all the time and we use the Mailchimp client to send out along with a lot of images and inline CSS.
I would probably suggest that if you have a lot of CSS, then use images instead.  
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
remorinaCommented:
Hi sfun28,
For best results with email campaigns/EDM you should use a table layout and inline styles.

keep your styles for example <span style="font:normal 12px Arial, Helvetica, Serif;">Test</span>

Although you can still define a <style type="text/css"></style> section under the <head> tag of your file and define your css classes there, it's still not 100% supported by all email clients/providers and some will ignore them.

Refrain from using positioning, floats and background images except for the body.

Cheers
0
HicanCommented:
Use table layout and properties instead of CSS. There are not much email clients (which i know off) which 'interpret' those properties in a wrong way. Like you said: email clients generally don't handle CSS very well. And if one does, the other doesn't etcetera. So it is better to set it up with properties / code that works in most (if not all) clients. So a basic HTML / Table layout would be best I think.

<table>
<tr>
<td border="1"></td>

... etc ...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

sfun28Author Commented:
There's no tool that will take my existing CSS in <head><style>... and convert to html or in-line the css?
0
LZ1Commented:
You can try this app:
http://premailer.dialect.ca/ 
0
sfun28Author Commented:
Thanks folks!  That premailer tool is exactly what I need.  I'll digest these comments and assign points tomorrow.
0
LZ1Commented:
Any updates?
0
sfun28Author Commented:
Premailer looked promising, however its butchering my layout past a certain point in the file.  there's no logical reason for this because the layout is consistent across the file (I have like 5 tables, one after the other, each in their own <p>).

Anyways, I found this tool which seems to work great:
http://www.pelagodesign.com/sidecar/emogrifier/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.