A Guide to CSS Inlining in Email
Email development involves a combination of HTML and CSS, or Cascading Style Sheets. While HTML structures the content and layout of the email, CSS inlining in email is used to style and format the content—like including link colors and headline fonts.
There are three ways to include styles within an email: using external stylesheets, embedded styles, or inline styles. While external stylesheets are a great option for web design, they aren’t the best option for email design—many webmail clients block links to external stylesheets.
Embedded styles are becoming increasingly popular due to the rise of mobile and associated popularity of responsive design techniques, but they do have their limitations. Since embedded styles are placed in the placed in the <head> of HTML documents, and some email clients, like Gmail, strip out most of the CSS styles in the <head>, the result is a royal mess in those inboxes.
Inline styles are applied directly to HTML elements in each line of HTML—and are generally the safest way to ensure rendering compatibility across various email clients. However, inline styles can be time-consuming to write and a bit challenging to manage.
So which should you use? While most designers use a mix of embedded and inline styles, inline styles are essential.
 | CSS Inlining in Litmus BuilderAutomatically inline your email’s CSS with a simple toggle and style your emails faster and easier than ever. |
WHY INLINE?
“Inlining” styles move the CSS and associated formatting instructions from the style block in the head of your email into the body of the HTML. Thanks to unwieldy email clients, like Gmail (one of the most popular email clients, representing 15% of email opens worldwide), inlining styles in email is a necessity.
What happens if you don’t inline your styles? The styling in the body of your email will not display in clients like Gmail.
By moving the styles inline, the email would display as intended in Gmail:
TOOLS FOR INLINING CSS
While it’s entirely possible to hand code inlined CSS from the start, it’s time consuming and difficult to maintain. Luckily, there are some solutions.
Third party inliner sites
There are a handful of online free tools that will automatically inline your CSS for you. After pasting your HTML into the tool it will regurgitate your code with all of your styles inlined.
Some of these tools include:
While these tools are extremely handy and much faster than inlining by hand, they can still be time consuming. For example, you have to copy your code from your editor/ESP into the tool, then copy your “new code” from the tool back into your editor/ESP. Have edits to your code? Be prepared to partake in the process all over again.
Task runners with an open source inliner
If your emails are generated in the back end of an application, solutions exist for most server side languages and frameworks. You can use task runners, like Grunt or Gulp, alongside an open source inliner, like Juice or Roadie, to inline your styles.
The task runner and open source inliner combination eliminates the copying and pasting frustrations found in the online inlining tools, but they do come with some cons of their own.
Not only do you have to set up these processes, but they require dependencies on services like Node or Ruby, which can result in potential bugs and extra maintenance. They’re also not as friendly for less-technical email builders.
CSS Inlining in Litmus Builder
CSS Inlining in available Litmus Builder—the only inliner specifically tuned to email development.
INTRODUCING: CSS INLINING IN BUILDER
With CSS Inlining in Builder, the process of inlining styles in email has now become easy, reliable, and enjoyable. It’s the only inliner built specifically for email—and it’s free.
With a simple toggle, embedded styles can be automatically inlined. There’s no copy and pasting and no maintenance—it’s a faster workflow than any task runner setup.
CSS Inlining for Litmus Builder:
- Never re-orders or converts CSS in any way: Never worry about your code getting mangled. Our inliner behaves exactly the way you want—you can actually trust the output.
- Preserves media queries, web fonts, and animation: Our inliner respects any CSS with an “@” declaration and won’t remove them.
- Preserves Outlook conditional comments: We know <!–if mso–> is an email designer’s best friend, so we made sure our inliner doesn’t ever come between the two of you.
- Preserves pseudo selectors: Working on fancy enhancements? You can use pseudo selectors at will without worrying about them getting removed.
- Preserves character entities: Our inliner ensures common entities, like smart quotes and non-breaking spaces, are never converted after inlining.
- Preserves CSS comments: We know comments are not only just for designers and developers, but can even be used for certain email clients—so our inliner doesn’t touch them.
- Preserves duplicate properties: Never worry about our inliner combining duplicate CSS properties. We understand some email clients only support certain values of the same properties.
- Prevents CSS from being inlined with data-ignore-inlining attribute: Have specific CSS you don’t want inlined? No problem. This attribute gives you complete control.
Want more details about how it works? Check out our help documentation, or explainer video below:
CSS inlining in Litmus Builder is now active in all paid Litmus accounts. Don’t have a Litmus account yet? Sign up today!
Blog 