{"id":5941,"date":"2016-08-08T00:00:00","date_gmt":"2016-08-08T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/css-inlining-in-email-what-it-is-how-to-do-it-webinar-recording\/"},"modified":"2024-12-20T11:21:54","modified_gmt":"2024-12-20T16:21:54","slug":"css-inlining-in-email-what-it-is-how-to-do-it-webinar-recording","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/css-inlining-in-email-what-it-is-how-to-do-it-webinar-recording","title":{"rendered":"CSS Inlining in Email: What It Is + How To Do It [Webinar Recording]"},"content":{"rendered":"

If you’re in any way involved in email design, you know that building a great email isn’t easy. Between choosing the appropriate layout, header weights and font, content, and more, a lot goes into building each campaign.<\/p>\n

Cascading Style Sheets (CSS) allow you to add styles and formatting to the HTML of your email, so that fonts, spaces, colors, images, and more appear the way you intended. There are numerous options for including CSS in your email, the easiest of which is to write your styles in the < head > of your email. However, since Gmail and some other clients will strip out CSS in the < head >, inlining your CSS is essential<\/a>.<\/p>\n

Except inlining styles can be time-consuming to code by hand and a bit challenging to manage. When you edit a specific style, it must be updated everywhere it appears in your code, making it easy to miss an incorrect style.<\/p>\n

So what should you do? We hosted a webinar to answer that very question\u2014covering the CSS inlining process from start to finish, defining exactly what inline CSS is, and why it\u2019s essential for creating bulletproof HTML emails that look great everywhere.<\/p>\n

Didn\u2019t have a chance to attend the webinar, \u201cCSS Inlining in Email: What It is + How To Do It?<\/em>\u201d Don\u2019t worry\u2014we recorded the whole thing. You can view the slides and check out the recording below.<\/p>\n

View the slides & recording \u2192<\/a><\/p>\n

There were so many great questions during the webinar. We didn\u2019t have a chance to get to them all, but I\u2019ve answered them all here on the blog. Plus, we\u2019ve linked to all of the resources mentioned in the webinar.<\/p>\n

What does it mean to inline your styles?<\/h3>\n

\u201cInlining\u201d styles moves the CSS and associated formatting instructions from the style block in the of your email into the body of the HTML.<\/p>\n

Why do you need to inline your styles?<\/h3>\n

Thanks to unwieldy email clients, like Gmail (one of the most popular email clients, representing 16% of email opens worldwide<\/a>), inlining styles in email is a necessity. If you don\u2019t inline your styles, the styling in the body of your email will not display in clients like Gmail.<\/p>\n

If we don’t use inliner program, but building it manually, should we start off making the styles first or the inline style first?<\/h3>\n

If you aren\u2019t using an inliner or a task runner for inlining, you should definitely be writing your CSS inline from the start to ensure compatibility across all email clients. In this scenario, I highly recommend using multiple cursors, which allow you to place your cursor at multiple points in your editor to type out the same code.<\/p>\n

I also recommend Emmet.io as a way of shorthand coding HTML and CSS<\/a>. This helps you reduce the amount of time it takes to write inline CSS.<\/p>\n

Third party inliners<\/h2>\n

What are third party inliners?<\/h3>\n

Third party inliners automatically inline your CSS for you. After pasting your HTML into the tool, it regurgitates your code with all of your styles inlined.<\/p>\n

Here are some examples of free inliners:<\/p>\n