CSS Inliner for Email: Convert Stylesheets to Inline Styles

Campaign Cleaner automatically converts your external and embedded CSS into inline styles, ensuring your email renders correctly in every client - from Gmail and Outlook to Apple Mail and beyond.

Why CSS Inlining Is Essential for Email

When you build a website, you write CSS in a separate stylesheet or in a style block in the head of your HTML document. Browsers are designed to read and apply that CSS. Email clients are not. Most major email clients - particularly Gmail on desktop and Android, and Outlook on Windows - strip or ignore CSS that is not written directly on each HTML element as an inline style attribute. This means a beautifully styled email can arrive as an unstyled wall of text or a broken layout when the client removes your stylesheet. CSS inlining solves this by moving your styles directly onto the elements before sending.

How CSS Inlining Works

A CSS inliner parses your HTML document, reads every CSS rule in your embedded stylesheets, and applies the computed styles directly to the matching HTML elements as inline style attributes. For example, a rule like p { font-size: 16px; color: #333; } becomes <p style="font-size: 16px; color: #333;"> on every paragraph tag. The original style block is then removed or reduced to only the rules that cannot be inlined - specifically media queries, which are used for responsive design and must stay in a style block to function.

Which Email Clients Strip External CSS?

The list of clients with CSS restrictions is long and covers the majority of email volume globally:

• Gmail (desktop web and Android): Strips all style blocks from the email head entirely. Only inline styles are preserved.
• Outlook 2007-2019 (Windows): Uses Microsoft Word's rendering engine, which ignores many CSS properties and applies its own box model.
• Yahoo Mail: Strips embedded styles in certain rendering modes and applies its own stylesheet overrides.
• Corporate mail gateways: Many enterprise email security systems sanitize HTML and strip CSS as a security measure before delivery.
• Older mobile clients: Native Android mail apps prior to 2016 and several third-party clients apply aggressive CSS stripping.

What Happens When You Don't Inline CSS?

Without inlining, your email's appearance in Gmail or Outlook is determined by the client's default stylesheet rather than yours. Headers may lose their font sizes. Buttons may lose their colors and padding. Text may render in the wrong font. Column layouts can collapse entirely. These rendering failures lead directly to lower engagement, higher unsubscribe rates, and reduced inbox placement over time as subscriber behavior signals worsen. For transactional emails, broken rendering can cause recipients to distrust the message and ignore it entirely.

CSS Inlining Best Practices for Email

Inlining handles the hardest part of the problem automatically, but a few additional practices ensure the best results:

• Keep media queries in a style block - these cannot be inlined and must remain in the head for responsive layouts to work in supporting clients.
• Use table-based layouts for structural containers where Outlook compatibility matters, as CSS flexbox and grid are not supported in Word-based rendering.
• Avoid shorthand CSS properties where possible - some email clients only respect explicit property names (e.g., padding-top instead of padding: 10px 0 0 0).
• Test after inlining using Campaign Cleaner's preview and SpamAssassin checker to confirm your inlined output renders and scores correctly before sending.
• Re-inline after every design change - if you update a stylesheet and forget to re-inline, recipients in stripping clients will see the old styles.

Frequently Asked Questions