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
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.
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.
Dynamic Content
Dynamic content in email refers to content blocks that change based on subscriber data, behavior, or preferences within a single email send.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Email Client Rendering
Email client rendering differences: market share statistics (Gmail 30-35%, Apple Mail 25-30%, Outlook 10-15%), rendering engine quirks like Outlook Word engine, Gmail style stripping, and testing matrix recommendations.
Email Template
An email template is a pre-designed HTML structure used as a reusable starting point for creating email campaigns.
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 `