CSS Inlining is a technique used in email marketing to boost delivery rates by embedding CSS styles directly into the HTML code.
<style>
tag or external CSS files. Instead, they require all CSS to be included inline within the HTML document. By inlining CSS, email designers can ensure that their emails render consistently across all email clients, even those that don’t support external CSS.
Inlining CSS can also help improve email deliverability. Many spam filters use algorithms to analyze the content of emails, and they may flag emails that have suspicious-looking external CSS files or stylesheets. By inlining CSS, designers can avoid triggering these filters and increase the chances that their emails will be delivered to recipients’ inboxes.
There are a few different ways to inline CSS, including manually copying and pasting the styles into the HTML code or using a CSS Inliner tool like Campaign Cleaner. A CSS Inliner tool is a program that automatically converts linked CSS stylesheets or <style>
tags into inline styles that can be applied directly to HTML elements.
Media Queries are used to adjust the CSS for certain devices and resolution, most of the major email clients support them to some degree. There is no harm in using Media Queries, if it’s supported that device will use them, if it’s not supported it will just be ignored. We have a setting to ‘Preserve Media Queries’, this option should be turned on, even if you don’t use them.
Also, there is two additional advanced options which are defaulted on,
!important
.<style>
tags used in HTML. The second image will show it being inlined into the HTML which is the proper way to send HTML emails.
<style>
tags were removed, we also removed the class
attribute, which is another feature of Campaign Cleaner, since it’s no longer needed. Additionally, the <h1>
tag should be to a <p>
tag, because it will inherit the CSS of the email/browser client. Which is another feature H to P Tag Conversion that can be turned on.