Why do HTML emails need inline styles?

Most email clients — including Gmail, Outlook, Apple Mail, and Yahoo Mail — strip or ignore blocks and tags in HTML emails. The only reliable way to apply styles in email is via inline style attributes on each element. Inlining CSS ensures your email renders consistently across all clients.

What CSS selectors are supported?

This tool supports the most common selectors: element type selectors (p, h1, table, td), class selectors (.header, .button), and ID selectors (#main, #footer). Complex selectors like descendant combinators (div p), pseudo-classes (:hover), and attribute selectors are not applied inline but are preserved in a comment for reference.

Will my media queries be preserved?

Media queries (@media) cannot be inlined and are retained in a block in the output. Some modern email clients (iOS Mail, newer Gmail) do support media queries in tags, so they are kept rather than discarded.

HTML Email Inliner

Move CSS from <style> blocks to inline style attributes for HTML emails.

$html with style block

lines

0 chars1 lines

$inlined html[READY]

lines

0 chars1 lines

Supported selectors: element (p, h1, table), class (.button), ID (#header), tag+class (a.link). Media queries are preserved in a <style> block.

Related Tools

</> HTML Formatter

Pretty-print HTML with proper indentation and readability.

FAQ

Why do HTML emails need inline styles?: Most email clients — including Gmail, Outlook, Apple Mail, and Yahoo Mail — strip or ignore <style> blocks and <link> tags in HTML emails. The only reliable way to apply styles in email is via inline style attributes on each element. Inlining CSS ensures your email renders consistently across all clients.
What CSS selectors are supported?: This tool supports the most common selectors: element type selectors (p, h1, table, td), class selectors (.header, .button), and ID selectors (#main, #footer). Complex selectors like descendant combinators (div p), pseudo-classes (:hover), and attribute selectors are not applied inline but are preserved in a comment for reference.
Will my media queries be preserved?: Media queries (@media) cannot be inlined and are retained in a <style> block in the output. Some modern email clients (iOS Mail, newer Gmail) do support media queries in <style> tags, so they are kept rather than discarded.

Paste an HTML document with a <style> block and the inliner will move matching CSS rules directly onto the HTML elements as inline style attributes. Supports tag selectors, class selectors, and ID selectors. Essential for HTML email compatibility — most email clients strip <style> tags and only render inline styles reliably.