Removing inline styles from your HTML email is quick and easy with a bit of javascript

If you haven’t adopted a framework that makes responsive HTML email easy, you’re likely still writing static HTML emails and then using the Campaign Monitor CSS Inliner to convert your HTML into something ready to be sent in your favorite email platform.

If that is the case, you have likely been in a situation where you inlined your styles, and accidentally saved over top of your original HTML email file. I can tell you that I have done it a number of times in the past few months as I worked on Code R.E.D. Fortunately for you and me, there is a fast way to get rid of the inline styles.

Javascript to the Rescue

If you have your HTML email file open, begin by linking to the jQuery library by adding the following line of code right before the </head> tag:

[html title=”Include jQuery in the head of your HTML Email file”]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>[/html]

[html title=”Add this script before the closing body tag”]
<script>
$(‘*’).each(function()
{
$(this).removeAttr(‘style’);
});
</script>
[/html]

Preview, Inspect, Copy and Paste

After adding the code above to your HTML email file, all you have to do is open the file in your web browser and copy the CSS-free HTML email code using the Inspector panel, here’s how to do it:

1. Open the HTML email file in Safari or Chrome.
2. Right-click and Inspect any element on the page.
3. Now, in the code inspector, right-click on the HTML element and choose “Edit as HTML” from the contextual menu that appears.
4. Your cursor will be inside the HTML element, select all of the code (CMD/CTRL + A)
5. Copy the selected HTML code
6. Paste the HTML code back into a new .html file and you are all done

A Note About Conditional Comments

If you are using Conditional Comments to target Outlook, the script will not be able to see the inline styles inside of them. You may have to do a bit of Find and Replace in your favorite text editor after you paste the HTML into your new document.