Do You Still Need to Inline CSS in HTML Email? Which Clients Drop the Style Block
Inline CSS is still the safest way to style HTML email. Most clients now read a style block in the head, but Gmail ignores one over 16 KB or placed in the body, its apps skip it for non-Google accounts, and a single syntax error can lose the whole block. Inline the layout and typography, keep media queries, hover states and web fonts in the head, and check the size afterwards.
Sources, read 2 November 2026: Google's CSS support in Gmail page, Can I email's style element table (last tested July 2023), and Microsoft's Word rendering reference for classic Outlook.
Who reads the style block, and who doesn't
| Client | Style block in the head | Notes |
|---|---|---|
| Gmail on the web | Yes, partly | Google: class, element and ID selectors and some media queries supported; may ignore unsupported properties. Can I email: not in the body, 16 KB limit |
| Gmail apps, Google account | Yes, partly | Same as above |
| Gmail apps, non-Google account | No | Per Can I email |
| Apple Mail (Mac, iPhone) | Yes | |
| Outlook.com, Outlook for Mac, iOS, Android | Yes | |
| Classic Outlook for Windows | Yes, buggy | Word engine; many properties ignored wherever written |
| Yahoo Mail on the web | Yes | Can I email notes a rule straight after a CSS comment is ignored |
The 16 KB and body rules come from Can I email's testing, not from Google's page, which doesn't mention a size limit. Treat them as practical limits.
What to inline and what to leave in the head
Inline: fonts, sizes, colours, line height, padding on cells, borders, widths, text alignment. These are the styles that make the email readable if the head block is ignored.
Leave in the head: media queries (for mobile stacking), :hover, ::before and ::after, @font-face. They can't be written on an element. Clients that support them read them from the head; the rest fall back to your inline styles.
How to inline a template
- Write the styles once in a style block in the head, with classes on your elements.
- Paste the HTML into the email CSS inliner. It writes each rule into the matching elements' style attributes in cascade order (specificity, source order and !important respected; any inline styles you already wrote win), keeps media queries, @font-face and hover rules in the head, and lists selectors that matched nothing.
- Turn on width and height attributes if the template has images or fixed-width tables, for classic Outlook.
- Run the result through the HTML email checker for size against the 102 KB clip and anything Outlook or Gmail drops.
- Send a test to Gmail, an Outlook desktop inbox and Apple Mail.
Keep the un-inlined file as your source. Editing an inlined template by hand means changing the same value on every element.
Honest limits
Inlining makes your styles apply in more places; it doesn't make unsupported CSS work. Flex and max-width are ignored by classic Outlook whether they're inline or not; see why HTML email breaks in Outlook. And how an email looks has little to do with where it lands; how to avoid spam filters covers what does.
Where SimpleVerifier fits
The inliner and checker are free and run in your browser. Before you send, check the list on the verify page; the first 100 checks are free with a Google sign-in. Pro is $39 a month with the first 100,000 checks a month at full speed, then slower, never cut off. See pricing.
Common questions
Do I need to inline CSS for Gmail?
Not strictly: Google's CSS documentation says you can style email sent to Gmail with style blocks, and Gmail supports class and ID selectors and media queries. Inlining is still the safe choice because Gmail ignores style blocks over 16 KB and in the body, and its apps skip them for non-Google accounts.
What CSS can't be inlined?
Anything that isn't a property of one element: media queries, :hover and other pseudo-classes, ::before and ::after, and @font-face. Keep those in a style block in the head.
Does inlining CSS fix Outlook?
Partly. Classic Outlook for Windows reads inline styles, but it uses Word's engine, which ignores flex, float, position and max-width wherever they're written. Inlining makes your styles apply; it doesn't make unsupported ones work.
Will inlining make my email bigger?
Yes, because a rule written once in the head is repeated on every element it matches. Check the inlined file against Gmail's roughly 102 KB clipping point.
Check your list before you send
Real mailbox checks over SMTP, and nothing is sent to the address. Sign in with Google and your first 100 email checks are free, no card. Plans for bigger lists are on the pricing page.