The CSS inliner 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.
This information also applies to EasyEditor for landing page templates.
Using the CSS inliner to 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>