Don't like ads? Go Ad-Free Today 

CSS Email Inliner (Style Attribute Inliner)

DeveloperText

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

HTML with

Guide

CSS Email Inliner (Style Attribute Inliner)

Turn HTML with a <style> block into email-ready markup with every CSS rule moved into inline style=”” attributes. Email clients strip or ignore <style> blocks, so inlining is the only reliable way to keep your design intact across Gmail, Outlook, Yahoo, and Apple Mail.

Paste your full HTML on the left; the tool parses every selector, resolves CSS specificity exactly the way browsers do, and writes the winning declarations onto each matching element. Pseudo-class rules like :hover and any @media query are kept in a residual <style> block, since email clients that support them still need them there.

How to Use

Paste your HTML — full document or fragment with a <style> block — into the input field.
Decide whether to keep media queries and pseudo-class rules (recommended for responsive email).
Optionally strip class attributes from the output once the styles are inlined.
Toggle pretty-print on or off depending on whether you want a readable or compact result.
Copy the inlined HTML or download it as a file, then drop it straight into your email service provider.

Features

Specificity-aware merging – Resolves IDs, classes, attributes, and element types exactly like the browser cascade.
!important handling – External !important declarations correctly beat plain inline styles, matching the CSS spec.
Media query preservation – Responsive @media rules are kept intact so your mobile breakpoints still fire.
Pseudo-class fallback – :hover, :focus, and ::before rules can’t be inlined; the tool keeps them in a slimmed-down <style> block.
Multiple <style> blocks – Handles documents with several style tags in the <head> or <body>.
Optional class stripping – Remove now-redundant class=”” attributes for a leaner payload.
Pretty-print output – Indented, readable HTML or compact one-line output.
100% client-side – Your HTML never leaves the browser. No upload, no server processing.

ADVERTISEMENT · REMOVE?

 FAQ

Why do HTML emails need CSS inlined instead of using a style block?

Many email clients — most notably older versions of Outlook and several webmail providers — either strip the head element entirely or sandbox the message so external and embedded styles are ignored. Inline style attributes on each element are the only declaration form that every major mail client respects, so the inlining step is a hard requirement for designs that need to look the same across Gmail, Outlook, Yahoo, and Apple Mail.
What is CSS specificity and why does the cascade order matter for inlining?

Specificity is the weight CSS gives a selector based on its IDs, classes, attributes, pseudo-classes, and element types. When two rules target the same property on the same element, the browser keeps the value from the rule with the higher specificity; ties are broken by source order, with the later rule winning. An inliner has to replay that algorithm declaration-by-declaration, otherwise a low-specificity rule could overwrite a high-specificity one and the rendered design would silently change.
How does the !important flag interact with inline styles?

In the standard cascade, inline styles sit at a higher origin than author stylesheets, so they normally beat any class- or element-level rule. The !important flag is the one exception: an !important declaration from an author stylesheet outranks a non-important inline declaration. That's why a button colored white !important in a class will still render white even if the element carries style="color: blue".
Why can't pseudo-class rules like :hover or pseudo-elements like ::before be inlined?

The style attribute holds declarations that apply unconditionally to the element it lives on. Pseudo-class rules describe a state — hover, focus, checked — and pseudo-elements describe generated content that has no real DOM node to attach to. Neither concept has a corresponding inline form, so any inliner has to leave those rules in a residual style block for the small subset of mail clients that support them.
What happens to @media queries during the inlining process?

Media queries are conditional rules whose declarations only apply when the viewport meets a constraint. Since the style attribute can't express conditional application, media queries must be preserved verbatim inside a style block. Responsive email designs lean on min-width and max-width queries to swap layouts on mobile, so stripping them would collapse the responsive behavior entirely.