If you are looking to convert your CSS to on-page (or “Inline”) CSS for use in email campaigns, I will tell you how I did it.

The Problem: Effective HTML in Emails

Most websites now-a-days use CSS to style their web pages and, in doing so, they typically call an external style.css file.

Ideally, you could then structure all of your company emails to have the look and feel of your website. However, despite vast advances in technology, email programs lag behind…their ability to effectively render any fancy HTML or read external stylesheets is dismal.

The Solution: Convert External CSS to Inline (on-page) CSS

Though fancy CSS styling in emails is progressing at a snails pace, it IS possible to configure your emails to look very nice using HTML with inline CSS–that is, implementing CSS directly within the email.

So, short of starting from scratch and recreating your whole website look and feel with raw inline CSS, what can you do?

Fortunately, there are tools you can use to convert your external CSS file into inline CSS. These tools will call your external css file and incorporate the inline CSS into a new file. The best way to use these tools is to first create your ideal email template (with external CSS) and then use that as the “input” URL that these tools will use.

I am going to present two of these tools that convert to inline CSS and I recommend that you try them both, though I tell you which I selected.

The two tools are the HTML Email Inline Styler and the CSS Inliner Tool.

I tried both of these and my preference was the first, the HTML Email Inline Styler. It did a much better job of effectively converting the CSS from my style.css file.

Converting External to Internal CSS Example

Would you like to see a finished product of this in action?

Visit my #1 SEO and Social Media Software homepage where I have a free 14 page whitepaper just for you entitled: “On-Page SEO: How To Implement On Page Search Engine Optimization To Achieve The Best Search Engine Results”. When you signup for it, you will be emailed a copy of the guide and the email is the one that I produced using the HTML email inline styler mentioned above.

Conclusion: Using CSS and HTML in Emails

Remember, unlike websites, all email programs treat HTML very differently and many email programs, by default, will not show a good portion of your HTML, like photos.

Thus, even though you have now learned how to convert external CSS to inline, on-page CSS, you still may not want to overdo it as many email clients will not render nearly the same image that you see in the browser.