Why it matters
Many email clients strip or ignore <style> blocks, so email HTML has to carry its styles on every element. Writing them inline by hand is miserable, and simple inliners get the cascade wrong, letting a weaker rule overwrite a stronger one.
This inliner works out the winning value for each property the way a browser would, keeps rules that can't be inlined (media queries and hover states) in a style block for the clients that read it, and adds the old HTML attributes Outlook on Windows still relies on.
How it works
- InputAn HTML email with a style block
- In your browserRules applied by specificity, media queries kept
- OutputHTML with inline styles and a client check
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Selector | Specificity | Declarations |
|---|---|---|
| body | (0, 0, 1) | 3 |
| .wrap | (0, 1, 0) | 2 |
| h1 | (0, 0, 1) | 3 |
| p | (0, 0, 1) | 3 |
| .muted | (0, 1, 0) | 2 |
| td.cta | (0, 1, 1) | 3 |
| .cta a | (0, 1, 1) | 3 |
How to use it
- Paste your email HTML with its <style> block.
- Choose whether to keep the style block and add Outlook attributes.
- Check the report of inlined and kept rules.
- Copy or download the inlined HTML.
FAQ
Does Gmail support style blocks now?
Gmail supports some <style> CSS, but strips it in several cases, such as forwarded mail. Inline styles are still the safe default.
Why keep media queries?
They can't be inlined, and clients like Apple Mail use them to make the email responsive.
Is any script run?
No. The HTML is parsed in an inert document; scripts don't run and images aren't loaded.
Will it fix every Outlook issue?
No tool can. It adds the common attributes, but Outlook's Word engine still needs tables for layout.
