---
title: "Inline the CSS and plan for it to fail · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/inline-css
updated: 2026-10-20
licence: "All rights reserved"
---

# Inline the CSS and plan for it to fail

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Put the CSS that matters inline on each element, and make sure the message still reads if a client strips the rest.
- How: 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.
- Check: Remove the `<style>` block from a test copy and open it. The text is readable, ordered and on brand, only plainer.

Example:

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

**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`.

- Previous: [Build layout that Outlook can show](https://agentwranglers.se/playbook/email/layout-and-accessibility/layout-tables)
- Next: [Fit every screen](https://agentwranglers.se/playbook/email/layout-and-accessibility/responsive-email)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)