Inline the CSS and plan for it to fail

Put the CSS that matters inline on each element, and make sure the message still reads if a client strips the rest.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Some clients drop <style> blocks, and some drop a whole block when one rule has an error. Inline colours, fonts and spacing with a build tool such as Juice or a template engine. Keep a <style> block only for extras, such as media queries and dark mode. Use web-safe fallback fonts after any custom font.

Example

<p style="margin:0 0 16px; font:16px/1.5 Arial, Helvetica, sans-serif; color:#1b1f3b;">
  Your order has shipped.
</p>

How to check

Remove the <style> block from a test copy and open it. The text is readable, ordered and on brand, only plainer.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/inline-css.