Is there a service available that will change class based styles to inline styles. I need to design an email and working with classes is by far easier and faster, but everything then must be changed to inline styles in the end. It seems like there should be a program that can do this, but I can't seem to find anything.
<table class="g">
<tr>
<td>
<p>
content should be bright green
</p>
<span>
content should be red and bold
</span>
</td>
</tr>
</table>
<style>
table.g p{
color:#3f0;
}
table.g span{
color:#f00;
font-weight:bold;
}
</style>
Can this be automatically changed to
<table>
<tr>
<td>
<p style="color:#3f0;">
content should be bright green
</p>
<span style="color:#f00;font-weight:bold;">
content should be red and bold
</span>
</td>
</tr>
</table>
using some sort of software that understands how CSS rules are applied, and can automatically convert them?
*tagged with javascript and jquery in case there is a way to do this using that.
Is there a service available that will change class based styles to inline styles. I need to design an email and working with classes is by far easier and faster, but everything then must be changed to inline styles in the end. It seems like there should be a program that can do this, but I can't seem to find anything.
<table class="g">
<tr>
<td>
<p>
content should be bright green
</p>
<span>
content should be red and bold
</span>
</td>
</tr>
</table>
<style>
table.g p{
color:#3f0;
}
table.g span{
color:#f00;
font-weight:bold;
}
</style>
Can this be automatically changed to
<table>
<tr>
<td>
<p style="color:#3f0;">
content should be bright green
</p>
<span style="color:#f00;font-weight:bold;">
content should be red and bold
</span>
</td>
</tr>
</table>
using some sort of software that understands how CSS rules are applied, and can automatically convert them?
*tagged with javascript and jquery in case there is a way to do this using that.
Share Improve this question asked Mar 18, 2013 at 17:10 12527481252748 15.4k34 gold badges117 silver badges241 bronze badges 3-
Why can't you use classes with a
<style>tag in<head>? – jrummell Commented Mar 18, 2013 at 17:12 - 1 @jrummell Gmail ignores that. All styles that you care about in a email should be inline – AlessMascherpa Commented Mar 18, 2013 at 17:14
- 1 @jrummell I'm afraid it is. You can find a state of this problems for each email client in email-standards – AlessMascherpa Commented Mar 18, 2013 at 17:24
1 Answer
Reset to default 13- Webapp:
- http://beaker.mailchimp./inline-css
- Python:
- https://github./davecranwell/inline-styler
- https://github./rennat/pynliner
- https://github./peterbe/premailer (It changes relative paths in to absolute ones)
- PHP:
- https://github./tijsverkoyen/CssToInlineStyles
- https://github./christiaan/InlineStyle (Allow using external CSS stylesheets)
- Ruby:
- https://github./maca/inline-style
- https://github./purify/mail_style (corrects src attr in img tags)
- JavaScript:
- https://github./LearnBoost/juice
- https://npmjs/package/grunt-email-builder (Grunt.js plugin)
- https://github./jonkemp/gulp-inline-css (Gulp plugin)
- C#
- https://github./milkshakesoftware/PreMailer.Net