CSS in Email: What You Can and Cannot Do
The practical reality of styling HTML emails with CSS.
CSS in email is a constrained subset of CSS in browsers. Properties you use daily in web development may not work in email clients. This guide documents what is safe, what requires workarounds, and what to avoid entirely.
If you want to skip the CSS limitations, visual builders like Sequenzy generate compatible code automatically. But understanding CSS in email helps you debug issues and make informed decisions.
Inline vs Embedded Styles
Inline Styles (Most Reliable)
<p style="color: #333333; font-size: 16px; line-height: 1.5;">
Text with inline styles
</p>Inline styles work in all email clients. They have the highest specificity and cannot be stripped. The downside: verbose code and no reuse without duplication.
Embedded Styles (Head)
<head>
<style>
.text-body {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p class="text-body">Text with class</p>
</body>Embedded styles work in most clients but Gmail has historically stripped them in certain contexts. Use for enhancements (media queries) but not for critical styles.
Best Practice: Both
Use inline styles for critical rendering. Use embedded styles for media queries and progressive enhancement. CSS inliner tools automate this conversion.
Typography CSS
Safe Font Properties
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;All major clients support these properties. Stick to px units for font-size (em/rem less reliable). Avoid font-weight values other than normal (400) and bold (700).
Web Fonts
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
<p style="font-family: 'Roboto', Arial, sans-serif;">
Custom font with fallback
</p>Web fonts work in Apple Mail, iOS, and some Android clients. Gmail and Outlook use the fallback. Always include a web-safe fallback.
Box Model CSS
Padding (Safe on Table Cells)
<td style="padding: 20px;">
Content with padding
</td>
<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
Content
</td>Padding on table cells is reliable. On divs and paragraphs, results vary. When in doubt, use table cells.
Margin (Use Carefully)
Margins are inconsistent, especially in Outlook. Prefer padding on container cells over margins on content.
<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
<h1 style="margin: 0;">Heading</h1>
</td>Width and Height
width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */Width works reliably. max-width is useful for responsive emails but Outlook ignores it (use conditional comments for Outlook fixed width). Height should be avoided since content should determine height.
Background CSS
Background Color (Safe)
background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */Background Images (Complex)
<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">
<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->
<div style="background-image: url('image.jpg');">
Content
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->Background images require VML for Outlook support. Always include a background-color fallback.
Border CSS
Solid Borders (Safe)
border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;Border Radius (No Outlook)
border-radius: 4px; /* Ignored in Outlook */Border-radius works in most clients but Outlook shows square corners. For buttons, this is usually acceptable. For critical rounded designs, use images.
Layout CSS
Display Property
display: block;
display: inline;
display: inline-block;
display: none;Basic display values work. display: flex and display: grid do NOT work in email. Use tables for layout.
Position (Avoid)
CSS positioning (absolute, relative, fixed) does not work reliably. Use table-based layout instead.
Float (Avoid)
Floats are unreliable in Outlook. Use table columns for side-by-side content.
Media Queries
@media screen and (max-width: 600px) {
.mobile-full {
width: 100% !important;
display: block !important;
}
.mobile-hide {
display: none !important;
}
.mobile-text-center {
text-align: center !important;
}
}
@media (prefers-color-scheme: dark) {
.dark-bg {
background-color: #1a1a1a !important;
}
}Media queries work in Apple Mail, iOS, Gmail App. They do NOT work in Outlook or Gmail web (reliably). Use !important to override inline styles.
CSS Reset for Email
<style>
/* Prevent text size adjustment */
body, table, td, p, a, li {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Remove table spacing */
table, td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove image borders and gaps */
img {
-ms-interpolation-mode: bicubic;
border: 0;
display: block;
outline: none;
text-decoration: none;
}
/* Reset body */
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
}
</style>CSS Inlining
Tools convert embedded styles to inline styles for reliability:
- Juice: Node.js library for CSS inlining
- Premailer: Online tool and gem
- MJML: Handles inlining during compilation
- Email builders: Sequenzy and others inline automatically
Debugging CSS Issues
- Check inline styles first. Missing or incorrect inline styles are the most common issue.
- Test in Outlook. If CSS works in Outlook, it probably works everywhere.
- Simplify. Remove CSS until the issue disappears, then add back gradually.
- Check specificity. Inline styles may override your embedded styles.
The Bottom Line
CSS in email is a constrained language. Stick to well-supported properties, use inline styles for critical rendering, and test across clients. Frameworks and builders like Sequenzy handle these constraints automatically.
The limitations are frustrating if you are used to modern web CSS. But understanding them lets you build emails that render consistently across all the quirky email clients your recipients use.