Styling Emails with CSS

Do you create your HTML emails in another program like Dreamweaver and then bring them into ClickDimensions? If so, it’s likely that you use what is called internal CSS to style your email. Internal CSS means that you’ve setup your styling at the top of the page and then you call upon those styles below. For example, you may setup header styles like this:

And then when you designate something as a header below, those styles would be automatically applied. So it would look like this:

And your email would look like this:

Okay, so now that we know what internal CSS is, let’s talk about the purpose of this post. Internal CSS is not the best option for styling emails. What we want is inline CSS instead. Inline CSS means the styles are applied separately to each piece of your email. This is better than internal CSS because it is more likely to work with more email clients. But designing your email with internal CSS can be a pain in many programs. We’ve found this great converter that takes your HTML and converts it into inline CSS for you! Check it out:

Just paste your HTML and hit Convert.

It will give you new HTML code with the CSS converted for you. Now just take that code and paste it back into the HTML area of the ClickDimensions Free Style or Custom HTML editor.

You may have noticed something else when you pasted your HTML into the converter – it gives you an HTML compatibility rating! It even tells you what attributes you are using that are not compatible with certain devices or email clients. For this example, we are 95% compatible. I could go back into my email template and change the attributes, and test again to see if it cleared the warning.

With a little copying and pasting and a hit of a button, you’ll have a more compatible email!

Powered by WPeMatico