• Facebook
  • Mail

Viv Web Solutions

  • Home
  • Portfolio
  • Services + Sectors
  • About
    • Our Vision
    • Our Process
    • Leadership
    • Endorsements
  • Contact

CSS-to-Inline Converter for HTML Emails

You are here: Home » Tools » CSS-to-Inline Converter for HTML Emails

Instantly transform your CSS styles into inline style tag properties

If you’ve ever gone through the headache of coding HTML emails that can be read by all email clients (such as GMail, MSN/Hotmail, Yahoo, AOL and others), then this is the script you’ve been waiting for. Try it now!

1. Upload your HTML file:

2. Upload your CSS file:

3. Enter your email:

4. Review our coding suggestions for best results

  • Check your CSS and HTML carefully to make sure your markup is valid.
  • Remove any and all javascript and server-side code (PHP, ASP etc.) to avoid parsing errors.
  • The parser will remove <!DOCTYPE>, <script>, and <link> tags, which are ignored by most email clients anyway.
  • Currently, the converter cannot handle multiple classes for individual elements (e.g. <p class=”blue sidebar”>). Please find an alternative way to style these elements before proceeding.

5. Process the files:
Convert »

There’s no way around it: most email client programs don’t like <style> declarations, or CSS code of any kind. They’ll ignore it; which means busted layouts for you, the hapless HTML email programmer.

Before the days of this wonderful tool, you would have to do one of two things:

  1. Completely ditch the stylesheet and design the email using each and every elements’ inline style=”…” property. This short-term solution causes serious headaches if any changes need to be made, since you would be deprived of the “cascading” luxury of CSS.
  2. Design the HTML email just like you would any other webpage, with CSS. So clean, so quick, so easy… until, of course, it’s time to send your masterpiece into the chaotic abyss of web-based email clients. Then, the real work begins. You troll through your CSS, cutting and pasting rule declarations into new style=”…” properties, all along wracking your brain to remember the CSS rules of precedence for classes, ids, and tags.

As you can see, the above choices aren’t the best use of your time. Lucky for you, we’ve invented a third choice: the CSS-to-Inline Converter. Try it now!

Features & Limitations

The CSS-to-Inline Converter class honors the following advanced CSS rules:

  • CSS rules of ordering (later entries take priority)
  • CSS rules of precedence (appropriate id, class, tag, tag#id, tag.class, and #id.class prioritization)
  • Comma-separated CSS rule entries (e.g. p#big,div#wide { … })

Current Limitations (you are advised to minimize the following in your documents):

  • HTML: server-side code and javascript
  • CSS: pseudo-classes like a:hover

New versions of the script will eventually eliminate the above limitations.

 

“Inline styles are inefficient and tedious, and I’m sure you’d ‘rather be golfing,’ but it works.”

– Mark Wyner, “CSS and Email, Kissing in a Tree,” A List Apart

The CSS-to-Inline Converter is featured on AjaxApp.com

Meanwhile, help render the CSS-to-Inline Converter obsolete by supporting the
Email Standards Project.

  • CSS-to-Inline Converter for HTML Emails
  • Download the CSS-to-Inline Converter
  • Get My Converted Google Paper Form
  • Get my CSS-to-Inline Conversion
  • Google Paper Forms
  • Google Paper Forms: Subscription

Sitemap

  • Home
  • Portfolio
  • Services + Sectors
  • About
    • Our Vision
    • Our Process
    • Leadership
    • Endorsements
  • Contact

From our Blog

  • paperwork: stack of files on messy desk, computer monitor in backgroundFour Reasons to Schedule an Office Clean-up Before the New YearDecember 7, 2017 - 9:20 pm
  • Five Tips for Giving TuesdayTwo Most Important Actions Non-Profits Should Take Post #GivingTuesdayDecember 1, 2017 - 3:58 pm
  • Delicious roasted whole chicken or turkey on plate with cutlery and sauce , harvest grilled vegetables on dark rustic background, top view, banner, frame. Thanksgiving Day foodSteps for #nonprofits to grow your followingNovember 20, 2017 - 11:12 pm

Our ears are burning!

“I have gotten many compliments on my improved webpage!"
-Cynthia Pasciuto, Esq.
True North Business Consulting

"Everyone has been saying the new web site is a 'home run!'"
-Emily Wood, Director of Communications
Campus Compact

more comments

Contact Us

Email:
quotes@vivwebsolutions.com

Phone (Toll-Free):
1-855-VIV-WEB1

Mailing Address:
240 Elm Street
2nd Floor
Somerville, MA 02144

Connect with us

Visit Us On TwitterVisit Us On FacebookVisit Us On Linkedin
© Copyright 2006-2025. Viv Web Solutions. All Rights Reserved.