Categories:
CSS in HTML templates- thumbnail

Inline CSS in HTML Emails: Enhancing Compatibility and Styling

Category : Email Coding

Web pages contain various properties and classes that are supposed to be updated, and the same is to be reflected in all the rest of the future pages. But, in case of emails, they are specific to one particular email template. Hence, it’s quite preferable to keep them inline.

As we know, email coding comprises of CSS and HTML, and CSS styles fall mainly into 3 categories – External, Internal and Inline styles. While web browsers and web pages are indulged with external CSS, Emails uses inline CSS.

Inline CSS vs. Internal/External CSS

Technologies like LESS CSS, SAAS, etc. are widely used nowadays in web page development. Also, there are many email development companies that use SAAS with Zurb framework but then what to choose depends upon the scenario of what is actually needed.

Suppose, one is engaged into building of email template to be used for multiple email campaigns or clients. In that case, the html email code is to be edited on regular basis for certain and especially when the framework is to be carried out with CSS in HTML emails. Here, the best thing that can be used is internal CSS as it provides much ease when it comes to code editing.

But, if the email template is for one time campaign than inline CSS would surely be an ideal choice. If you are a web developer who is looking forward to email coding, than you can surely opt for internal CSS and thereafter use inliner tool for the same.

Why Inline CSS in Email?

Email coding comprises of CSS and HTML. Inline styles move the CSS and the associated formatting instructions from the very side block of the email to the body of HTML. Most of the email clients today prefer the CSS to be inline. And, most of the ESPs like Mailchimp or Campaign Monitor will inline the CSS first and once inlined it would then distribute to the subscribers.

Though the best methodology to code the email might be different but the number of key design fundamental of email haven’t been amended. In last few years, we have witnessed many transformation in the versions of Hotmail, Google, and Yahoo!

In order to acquire design consistency across various email environments, CSS in inline form is the best option one can opt for. If you are looking for best support in Gmail and Outlook 2007, Inline CSS turns out to be the best option.

Moreover, inline CSS is safest when it comes to ensuring the rendering of compatibility across the different email clients. One of the greatest advantages delivered by inline styles is its direct application to HTML elements. It is directly applied to the elements of HTML email templates in each of the lines of HTML.

Before and After implementation of Inline CSS

Here, is the image of EmailMonks without the implementation of inline CSS in it:

HTML email templates- EM without css

By the implementation of Inline CSS in email, the email would be displayed as it is intended in EmailMonks:

CSS in HTML Emails- EM template

Even when one is engaged in sending out HTML emails oneself or using Email automation service like Mailgun, CSS inline will be the prime prerequisite. Tools like Premailer have proved out to be efficiently good in automatically putting the inline CSS after editing in email.html.

How to Override Inline Styles with CSS

Most often the inline styles are looked forward as the means of overriding the styles that are set up in CSS. Inline CSS being handy, most of the time this is the same case. However, on some of the markup there are inline styles that cannot be entirely removed but need to override all those styles; due to which, it must be done in some other way.

Well, this markup can be the one that is inserted from external JavaScript to the page on which one cannot have control on. For this, the inline CSS can be override directly from the stylesheet itself. We have !important rule at rescue for same. And, one of the best methodology to override !important is to overrule it with another !important with greater precedence.

However, CSS inline styles are pretty challenging to manage and time-consuming to write. Fortunately, there are some solutions to that:

1. You can render help from Third party CSS inliner sites

There are many online tools available that can render help in automatically inlining CSS for your emails. After one pastes the HTML into the tool, it’ll upchuck your code with all the styles inlined. Well, some of these tools includes Campaign Monitor’s CSS inliner, Premailer, Zurb’s Responsive Email Inliner, etc.

2. Litmus Builder offering the CSS inlining facility

Since the CSS inlining is available in Litmus Builder, the tedious process of inlining the styles in email has turned out to be quite reliable and enjoyable. Moreover, it’s the only inliner that is built especially for email and it’s even free. Here are a few advantages of the same:

o Keeps animation, web fonts and even the media queries: This inliner respects any CSS that contains “@” declaration and won’t discard it.
o Keeps safe CSS comments: The comments are vital for not only the developers and designers, but even for some email clients. Hence, the inliner doesn’t mess with it.
o Doesn’t affect Outlook conditional comments: As we know, <!–if mso–> is always an email designer’s best friend. Hence, the inliner makes it sure that it doesn’t come in between you two in any case.

3. Well, Task runners are at rescue along with an open source inliner

If your emails are the ones that are generated in the back end of an application, there are solutions existing for most of the server side frameworks and languages. Well, for this, you can opt for task runners like Gulp or Grunt along with an open source inliner like Roadie or Juice in order to inline your styles in HTML email CSS.

Hacks for enhancing your Email coding experience

Can’t change the external style file?
Use inline CSS! They have highest precedence and due to which it can override them all.
Need quick application?
Inline CSS styling can be pretty quickly applied.
Frustrated with creating additional files now and then?
With this, one doesn’t require additional file that is to be created.
Want to get rid of the HTTP requests?
By the use of inline CSS in HTML emails, there are very less HTTP request and the website loads faster than external CSS.

Inline CSS certainly renders many advantages over the Internal and External CSS for Email coding. No doubt, each of them have its own set of advantages which stands them out from each other. But, when it comes to email coding, one should never overlook the salient features offered by inline CSS. If you have any queries regarding the same, Monks would love to have them sorted.

At Email Monks, we code the email templates with inline style at a speed faster than those who still use internal or external CSS, and that too without the use of Inline though. That’s awesome! WOW 

The following two tabs change content below.
Kevin George
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.

Leave a Reply

Your email address will not be published. Required fields are marked*