Email CSS inliner: move your styles inline for Gmail and Outlook
In short: Writes each <style> rule into the style attribute of every element it matches, in cascade order (specificity, source order, !important), keeps existing inline styles, leaves media queries, @font-face and :hover rules in the head, and can copy pixel widths to width attributes for Outlook. Limit: Your browser re-writes the HTML as it parses it, so the markup can change slightly.
Paste an HTML email that keeps its CSS in a <style> block and press Inline the CSS. Every rule is written into the style attribute of each element it matches, in cascade order, with your existing inline styles kept. Media queries, @font-face and :hover rules stay in the head, because an inline style can't hold them.
Price: this tool is free. Checking a whole email list is from $9/mo, and the first 100 checks are free with Google, no card. See pricing
Sample result
5 CSS rules written inline on 6 elements; the :hover rule and the media query stay in the head.
- Inlined
- 5 rules
- Elements styled
- 6
- Size
- 1.0 → 1.1 KB
What this means for you
Paste the result into your sending tool; the styles hold where a <style> block is ignored.
- Rules inlined by specificity
- Existing inline styles kept
- Media queries and :hover stay
- Width attributes for Outlook
- CSS
- Inline
- HTML email
By SimpleVerifier Team · Last updated · Runs in your browser; nothing you paste is sent to us
How do I check the list the email goes to?
- Inline the CSS here and paste the result into your sending tool.
- Upload your send list at /verify. Every address gets a live mailbox check, and valid, risky and invalid download as separate files. The first 100 email checks are free with a Google sign-in, no card.
- Send only to the valid file.
How do I inline CSS in an HTML email?
- Paste the full HTML of your email, head and
<style>block included, or upload the .html file. - Choose whether to drop the inlined rules from the
<style>block and whether to copy pixel widths to width attributes. - Press Inline the CSS, then copy or download the result.
- Paste it into your sending tool's code editor and send yourself a test.
Example
- You enter
- A 1.0 KB email whose
<style>block holds rules for body, .container, p, .footer p, .btn, a .btn:hover rule and a media query, with the footer paragraph styled by bothpand.footer p. - You get
- 5 rules written into 6 elements' style attributes; the footer paragraph gets 14px and #555555 from
.footer p, which outranksp. The :hover rule and the media query stay in the<style>block, and the 600px table getswidth="600". 1.0 KB becomes 1.1 KB. - Limits
- Runs in your browser, so the HTML is not uploaded; an uploaded file can be up to 25 MB.
Why do HTML emails need inline CSS?
Because some places your email is read ignore the <style> block. Gmail supports a style block in the head, but drops it whole if it can't parse a rule, and some Gmail views, such as the app showing a non-Google account, don't use it at all. Older desktop clients and many corporate filters strip it too. A style attribute on the element survives all of those, so the layout and fonts hold.
Media queries, @font-face and states like :hover can't be written as a style attribute, so they stay in the head and act as an enhancement where the client supports them. That is the split every email framework produces, and what this tool does.
How does the inliner decide which rule wins?
It follows the CSS cascade: for each property, the rule with the higher specificity wins (an id beats a class, a class beats a tag), a later rule beats an earlier one of the same specificity, and !important beats both. A style already on the element wins over the stylesheet unless the stylesheet rule is !important. Selectors are matched by your browser's own engine, so anything your browser understands, from .footer p to td:first-child, is matched the same way.
!important is dropped from the inline result, because inline styles already come last, and an inline !important would stop your media queries from overriding them on phones. Keep !important in the media query rules instead, as the sample does.
Why does Outlook still ignore my widths?
Outlook for Windows ignores CSS width on images and on many table cells and reads the width attribute instead. Tick the width option and every image, table and cell with a pixel width in its style also gets a matching attribute (width="600"). Check the result with the HTML email checker, which flags images still missing one.
Who uses this tool, and for what?
- Email developers
- Write the template with a clean
<style>block and inline it as the last step before it goes into the ESP. - Marketers
- Fix a template that looks right in the editor but loses its fonts and colours in some inboxes.
- SaaS teams
- Inline a transactional template once without adding a build step or a Node package.
- Agencies
- Hand a client HTML they can paste into any sending tool without it falling apart.
What can’t this tool tell you?
- Your browser re-writes the HTML as it parses it, so the markup can change slightly.
- Rules in linked stylesheets aren't fetched; paste the CSS into a
<style>block first. - Shorthand and longhand properties (padding vs padding-top) aren't merged, only ordered.
- It can't tell whether the addresses you send to exist.
Common questions
- Does it keep my media queries?
- Yes. @media blocks, @font-face, @import and rules using :hover, :focus, ::before and similar states always stay in a <style> block in the head.
- Will it change my HTML?
- Your browser parses the HTML to match the selectors, and writing it back out can close unclosed tags, add a tbody to tables and reorder attributes. Outlook conditional comments are kept. Send a test after inlining.
- What happens to selectors that match nothing?
- With "remove inlined rules" on, they are dropped and listed under the result; with it off, the whole style block is kept as it was.
- Is my HTML uploaded?
- No. It is processed in your browser and nothing is sent anywhere.
Sources
A tidy list can still be full of dead addresses.
Extracting, deduplicating and syntax checks all work on the text of an address. None of them can tell whether the mailbox exists. Only the server that hosts it can answer that, through an SMTP check, and that is what the paid product does.
- Upload the cleaned file as it is: CSVs up to 100,000 rows
- A real SMTP mailbox check on every row, with catch-all detection
- Small list? Starter at $9/mo covers 2,500 emails a month, cancel anytime
Plans from $9 a month, cancel anytime, no contract. Sign in with Google and your first 100 email checks are free, no card. The free tools stay free either way.