Tools Viewer

How to Inline CSS for HTML Email

Published on July 24, 2026 by Tools Viewer

How to Inline CSS for HTML Email
How to Inline CSS for HTML Email

If you write HTML email with a<style>block in the head, you already know the problem: many email clients — including some versions of Gmail and most older Outlook builds — strip or partially ignore styles that are not applied directly to elements. The fix is toinline CSS for HTML emailbefore you send.Email Viewer includes a one-click Inline CSS tool that moves your stylesheet rules directly onto each element'sstyleattribute.

Why email clients strip stylesheet blocks

HTML email exists in a different showing environment from web pages. Email clients process your HTML to display it safely inside their own interface — Gmail inside a browser, Outlook inside a desktop app, Apple Mail inside its own shower. Each client has its own rules about which HTML and CSS is allowed.

Many clients remove the<head>section of your email entirely, or only pass through a limited subset of CSS from it. Gmail (particularly in its web and Android versions) is the most well-known example — it historically stripped<style>blocks, causing your carefully written CSS to disappear completely. Other clients allow some style block CSS but block certain properties.

Inline CSS — styles applied directly asstyle="..."attributes on individual elements — survives almost all email client processing because it is attached to the element itself, not a separate rule that can be stripped.

How to inline CSS in Email Viewer

  1. OpenEmail Viewer on ToolsViewer.
  2. Load your email HTML by pasting it into the editor, importing a.htmlfile, orcompiling from MJML.
  3. ClickInline CSSin the toolbar. Email Viewer reads your<style>blocks, matches the selectors to elements, and applies the declarations as inlinestyleattributes.
  4. Review the updated markup in the editor — you will seestyle="..."attributes appear on elements that previously only had CSS class names.
  5. Check the live preview to confirm the email looks identical before and after inlining.
  6. Export or copy the inlined HTML for your email platform or email sending platform.

What inlining fixes — and what it does not

Inlining solves the most common CSS delivery problem in email, but it is not a complete solution on its own:

Inlining helps with:

  • Clients that strip the<head>section — styles travel with the element
  • Clients with partial CSS support — inline styles have the highest specificity and override most client default styles
  • Reducing the chance of style conflicts with the email client's own CSS

Inlining does not help with:

  • Media queries—@mediarules cannot be inlined; they must stay in a<style>block. Media queries are supported by Apple Mail and some Gmail versions, but not by Outlook.
  • Pseudo-classes and pseudo-elements—:hover,::before, and similar selectors cannot be expressed inline and must remain in a style block (where supported).
  • CSS custom properties (variables)— most email clients do not support CSS variables at all, inlined or not.

After inlining, keep a reduced<style>block for any responsive rules and pseudo-class rules you need. Inline CSS handles the layout and typography; the style block handles responsiveness.

Suggested workflow for sendable email HTML

Here is the complete workflow from authoring to ready-to-send:

  1. Design with classes and a style block.Inline styles are hard to read and maintain while you are iterating. Write your styles in a<style>block and use class names during the design phase.
  2. Preview across client profiles.Use Email Viewer's client simulation to check showing before inlining — fixes are much easier in the class-based source.
  3. Inline CSS when preparing the sendable build.Click Inline CSS only when you are ready to export. Keep the pre-inlined version as your working source for future edits.
  4. Preview again after inlining.Confirm the inlined version looks identical to the pre-inlined version across client profiles.
  5. Run the QA checklist.Check thepre-send QA checklist to catch remaining issues before exporting.
  6. Export for your email platform.Copy or download the inlined HTML and paste it into your sending platform.

Checking CSS client support

Not every CSS property is supported by every email client, even when inlined. Before spending time on a complex CSS technique, check whether it is supported by the clients your list uses. The Can I email database is the most comprehensive reference. Email Viewer's HTML Check uses similar compatibility data to flag properties that may not show as expected.

For the full picture of why email CSS behaves differently from web CSS, seeHTML email vs browser HTML.