Summary

Please note: This information also applies to EasyEditor for landing page templates.

EasyEditor has a built-in CSS inliner, which converts CSS rules in specific internal stylesheets to inline styles. This process helps to speed up development by making it easier for you to globally change styles. Furthermore, this process is useful because some email clients render CSS only if it is inline.

Making the CSS inliner convert rules in internal stylesheets to inline styles

If you want the CSS inliner to convert rules in an internal stylesheet to inline styles, you must add the ee-render attribute to that internal stylesheet and set the attribute's value to "inline":

<style ee-render="inline">
.big-text { font-size: 30px; } /* this will be converted to an inline style */
</style>

The CSS inliner takes an internal stylesheet that has the ee-render="inline" attribute, converts all those CSS styles to inline styles, then removes that internal stylesheet (to make the final HTML size smaller).

Styles that can and can't be inlined

Important

CSS styles that cannot be inline and that are in an internal stylesheet with the ee-render="inline" attribute are removed before the campaign is sent.

Generally, most CSS styles can be inline, for example:

p { font-size: 14px; }
.my-class { font-size: 14px; }
table td.some-class p { font-size: 14px; }

However, pseudo-classes and media queries can't be inlined and will be removed before being sent, for example:

a:hover { color: red; }
p:before { content: '-'; }
@media only screen and (max-device-width: 767px) {
  .red-mobile-links { color: red; }
}

CSS style precedence

Our CSS inliner follows precedence rules in the same way as CSS on a webpage; specific selectors overwrite the general selectors, for example, inline styles take precedence, unless the style in the internal stylesheet has the !important directive, for example:

<style ee-render="inline">
p { color: black; }
p.coloured { color: green!important; }
</style>

<p>Black text</p>
<p style="color: red;">Red text</p>
<p class="coloured" style="color: red;">Green text</p>
<p class="coloured" style="color: red!important;">Red text</p>