Definition
CSS in email is fundamentally different from CSS on the web. No single standard governs email CSS across clients. Gmail strips embedded <style> tags and only respects inline styles on individual HTML elements. Outlook Desktop renders the HTML via Word, which ignores or mangles CSS properties like margin, float, position, and background-image on non-table elements. Apple Mail supports the widest range of CSS, including media queries, @import for fonts, CSS animations, and pseudo-classes like :hover.
The practical consequence is a defensive coding model. Core presentation (colors, fonts, spacing) is applied via inline styles. Layout is built with tables enhanced by the align and valign attributes. Progressive enhancement is layered through <style> blocks that only clients like Apple Mail and Samsung Email parse. Media queries live in the <style> block to make layouts responsive for mobile, falling back to a fixed-width desktop layout in Gmail and Outlook.
Best Practices
Always inline your CSS when sending campaigns. Use your ESP's auto-inliner or tools like Juice (Node.js) to merge <style> block rules into inline style attributes. This ensures Gmail renders text colors, background colors, and font sizes correctly. Never rely solely on a <style> block for critical layout styles.
Use media queries only for progressive enhancement. Define a base fixed-width layout (600px) that works in Gmail and Outlook. Then add a @media screen and (max-width: 600px) block to switch to full-width fluid layout in Apple Mail, Thunderbird, and Samsung Email. Gmail ignores the query entirely and shows the base layout.
Wrap Outlook-specific code in conditional comments. Use <!--[if mso]> to hide or show elements only in Outlook Desktop. Common uses include adding VML for background images, resetting table widths, and specifying separate font stacks. Close the comment with <![endif]--> and ensure non-Outlook clients see the standard HTML.
Avoid CSS properties with known client bugs. border-radius works in most modern clients but not in Outlook Desktop. Use VML rounded corners for Outlook or accept squared corners. display: none is unsupported in Gmail — use a different technique to hide content. background-position on divs fails in Outlook; use VML or place background images on table cells instead.
Related Glossary Terms
Email Animation
The use of motion in email through animated GIFs, CSS animations, and video embeds with fallback strategies.
Email Bulletproof Button
A cross-client email button technique using VML for Outlook and standard HTML for all other clients, ensuring consistent appearance and clickability.
Email Gmail CSS
The subset of CSS supported by Gmail, which strips most `<style>` block rules and requires inline CSS for reliable rendering across web and mobile.
Email Hybrid Coding
A responsive email development approach combining table-based layouts for Outlook with div-based fluid techniques for modern clients.
Email Interactive
Email elements that respond to user action using CSS pseudo-classes, checkbox hacks, and limited scripting alternatives.
Email MJML
An open-source framework that abstracts responsive email coding into simple components, compiling to production-ready HTML with cross-client compatibility.
Frequently Asked Questions
Gmail removes `