Definition
CSS inlining is the process of converting CSS style declarations from embedded stylesheets, typically defined in a <style> block in the HTML head, to inline style attributes on each individual HTML element. This transformation is required because many email clients, particularly Gmail and Outlook, strip or ignore styles defined in the <head> section while rendering inline styles reliably.
The technical reason CSS inlining is required stems from how different email clients process HTML. Webmail clients such as Gmail and Yahoo parse email HTML through their own rendering engines, which strip <style> blocks for security reasons. Desktop clients such as Outlook use the Word or Edge HTML rendering engine, which has limited support for embedded styles. Mobile clients on iOS and Android generally support embedded styles but still render inline styles more consistently. The result is that the only reliably supported CSS approach across all email clients is inline styles on each element.
Manual versus automated CSS inlining approaches differ significantly in workflow impact. Manual inlining, copying styles from a stylesheet to each element's style attribute, is time-consuming and error-prone, especially when making later changes that must be propagated to every element. Automated inlining uses tools or libraries that process an HTML email with a separate CSS stylesheet and produce a new HTML file with all styles inlined. Automated inlining is strongly preferred for production email development because it maintains a clean separation between HTML structure and CSS presentation while producing email-client-compatible output.
Best Practices
- Use an automated CSS inlining tool as part of your email build pipeline: Integrate a CSS inliner such as Juice for Node.js, Premailer for Ruby, or an ESP-provided inliner into your email development workflow. Run the inliner automatically during the build process rather than as a manual step. Automated inlining saves hours per campaign and eliminates human error.
- Maintain a clean source stylesheet and never edit inlined HTML directly: Always edit your source CSS in the stylesheet or style block, then re-inline to produce the final email HTML. Editing inline styles directly creates maintenance problems because changes must be manually duplicated to every affected element. Automated inlining from a source stylesheet ensures consistency.
- Test inlined HTML across major email clients after every template change: Inlining can introduce errors such as missing styles, incorrect specificity ordering, and style conflicts. After inlining, use an email testing tool to verify the rendered output across Gmail, Outlook, Apple Mail, and mobile clients. Fix any rendering issues in the source CSS and re-inline.
- Know which CSS properties cannot be inlined effectively: Some CSS properties are not supported in email regardless of inlining.
position,z-index,floatin some clients, and advanced selectors such as:hoveroutside of<style>blocks are not reliably supported. Use table-based layout, inline-block, or simple CSS approaches for email layout. - Organise CSS by media query blocks for responsive email design: Media queries must remain in the
<style>block because they cannot be inlined. Structure your CSS with base styles that are inlined and responsive styles in media query blocks that stay in the<head>. This enables responsive email design while maintaining consistent base styling through inlining.
Related Glossary Terms
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AMP for Email
AMP for Email is a technology that allows interactive, dynamic content to live inside an email message, enabling forms, carousels and live updates.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Frequently Asked Questions
Email clients strip or ignore CSS styles defined in the `
` section of an HTML email for security and rendering reasons. Gmail strips all `