Crosspost note. Originally published at min8t.com/articles/inline-css-for-email. I’m one of the maintainers of MiN8T, which makes the in-browser CSS inliner referenced at the end. The technical content here applies regardless of which inliner you reach for.
You write CSS in a
After inlining:
class="btn" href="..."
style="background: #28ef91; color: #2b312c; padding: 12px 24px; border-radius: 999px;">
Read more
The rule is gone from the
What color is the text? Green. The id selector #hero has specificity (1, 0, 0); the class .promo has (0, 1, 0). ID wins. A naive inliner that just walks rules in source order would write style="color: green" first then style="color: orange", leaving orange as the final inline value. Wrong.
!important overrides specificity
An !important declaration beats any non-important declaration regardless of specificity. So:
.promo { color: orange !important; }
#hero { color: green; }
now resolves to orange. Inliners that don't track !important separately will get this case wrong too.
Existing inline styles also count
If your input HTML already has style="color: yellow" on the element, that inline value has effective specificity (1, 0, 0, 0). It beats anything in the