Working with Cascading Style Sheets (CSS) to add styles and formatting to your HTML emails can be time-consuming to code by hand and a bit challenging to manage.
In this actionable webinar, Kevin Mandeville, Litmus’ own email design extraordinaire (and the guy who embedded a live Twitter feed in an email!), takes you through the CSS inlining process from start to finish. He explores exactly what inline CSS is and why it’s essential for creating bulletproof HTML emails that look great everywhere.
8. litmus ®
#LitmusLive
It’s like a house.
HTML is the actual foundation of what is contained in the
house (floors, rooms, doors, television. etc.)
CSS is the styling of the actual items in the house (dimensions
of the room, color of the walls, placement of the furniture, etc.)
JavaScript is the interaction you have with the house (ringing
the door bell, turning on/off lights, etc.)
19. litmus ®
#LitmusLive
Apple Mail ✅
Lotus Notes ✅
Outlook 2000-2016 (Win + Mac) ✅
Thunderbird ✅
Android 4.x ✅
Gmail App (Android) ❌
iOS Mail (Every OS on iPhone + iPad) ✅
AOL Mail ✅
Gmail ❌
Inbox by Gmail ❌
Google Apps ❌
Office 365 ✅
Outlook.com ✅
Yahoo! Mail ✅
GMX ✅
Web.de ✅
Embedded CSS Support in HTML Email
Source: Litmus Email Analytics
*Based on class and id support, not element selectors
37. litmus ®
#LitmusLive
CSS Inlining
CSS inlining is the automated process of moving external style
sheets or embedded styles in the <head> right inline onto its
corresponding HTML elements.
52. litmus ®
#LitmusLive
No learning curve or setup
(simple copy & paste)
✅
Use with any editor ✅
No maintenance required ✅
Requires Internet ❌
Constant copying & pasting
(not ideal for iterative workflow)
❌
Other automations not available
(not ideal for iterative workflow)
❌
No flexibility or customization ❌
Third party inliner sites
PROS CONS
60. litmus ®
#LitmusLive
How It Works
Compiles SCSS to CSS
Compiles Handlebars (templating language)
to HTML
Inlines CSS using Juice
Generates Browser preview and
sends test emails (if setup)
64. litmus ®
#LitmusLive
Use with any editor ✅
Use locally
(Internet not needed and easy to create backups on GitHub,
Dropbox, etc.)
✅
Complete flexibility & customization
(add other automations)
✅
DRY (Don’t Repeat Yourself) ✅
Learning curve
(Requires command line and JavaScript knowledge)
❌
Dependencies ❌
Requires maintenance ❌
Task runners with open source inliners
PROS CONS
68. litmus ®
#LitmusLive
No learning curve or setup
(just a simple toggle)
✅
No maintenance required ✅
Best CSS inliner ever made for email ✅
Litmus Instant Previews integration ✅
DRY (Don’t Repeat Yourself) ✅
Requires Internet ❌
No flexibility or customization ❌
Does not work with any editor
(requires Litmus Builder)
❌
Only inlines embedded CSS ❌
CSS inlining in Litmus Builder
PROS CONS
74. litmus ®
#LitmusLive
Never re-orders or converts CSS in
any way
✅
Preserves media queries, web fonts,
and animation
✅
Preserves Outlook conditional
comments
✅
Preserves pseudo selectors ✅
Preserves character entities ✅
CSS inliner in Litmus Builder/PutsMail
Preserves CSS comments for unlined
CSS
✅
Preserves duplicate properties ✅
Prevents CSS from being inlined with
data-ignore-inlining attribute
✅
Litmus Instant Previews integration ✅
DRY (Don’t Repeat Yourself) ✅
75. litmus ®
#LitmusLive
1. Litmus Builder/PutsMail ✅
2. Roadie ✅
3. Juice ✅
Our top recommended CSS inliners for HTML email
*Varies on use case (this ranking is of straight HTML, not accounting for ESP-specific use cases)