What is inline CSS vs embedded style block?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
When you write HTML email, you have two ways to style it: inline CSS (styles written directly on each element) or an embedded style block (all the CSS in one <style> tag in the <head>).
Inline CSS looks like this: <p style="color: #333; font-size: 16px;">Hello</p>. Every style rule is attached to the element itself.
An embedded style block looks like this:
<style>
p { color: #333; font-size: 16px; }
</style>The practical difference: inline CSS is almost universally supported. Gmail, Outlook, Yahoo Mail, Apple Mail, all of them honor inline styles. Embedded style blocks are cleaner to write and easier to manage (all your styles in one place), but many email clients strip them out or ignore them. Gmail used to strip <style> blocks entirely. They don't anymore, but Outlook still has patchy support, and older clients will ignore them completely.
So why would you ever use embedded styles? Two reasons. First, they're way easier to maintain. If you're writing complex responsive email (media queries, hover states), you can't do that inline. Second, modern ESPs like Mailchimp and Klaviyo will automatically inline your styles during the send process, so you get to write clean code and they handle the messy part.
The best practice: write your email with an embedded style block, then use an inlining tool (or let your ESP do it) to convert everything to inline CSS before you send. That way you get the ease of a style block and the compatibility of inline styles. Most marketing ESPs handle this automatically. If you're coding transactional email by hand, tools like Premailer or Juice will inline your styles for you.
If you're not sure whether your ESP inlines automatically, send yourself a test email and view the source code. If you see a <style> block but no inline styles, your ESP isn't inlining. If you see style= attributes everywhere, it's working.
One more thing: some clients strip <style> blocks but keep inline styles AND class-based styles that were defined in the head. It's inconsistent and annoying, which is why most email developers just inline everything and call it a day.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
