Definition
Email rendering refers to how an email client interprets and displays HTML and CSS. Unlike web browsers, which largely converge on modern standards, email clients diverge significantly. Outlook uses Microsoft Word as its rendering engine (not Edge or Internet Explorer), which means it ignores many CSS properties including background images on divs and margin support. Gmail strips embedded <style> tags from the <head> and most CSS classes, leaving only inline styles on specific HTML elements. Apple Mail uses WebKit and supports modern CSS including animations, media queries, and custom fonts.
This fragmentation forces developers to use a hybrid coding approach. Core layout is built with tables (Outlook-safe), styled with inline CSS (Gmail-safe), and enhanced with embedded <style> blocks in the <head> (Apple Mail-safe). Progressive enhancement layers in features like media queries and hover effects that only execute in supporting clients, while the base layout remains readable everywhere.
Best Practices
Code your email layout using HTML tables for structure, not divs. Outlook renders divs inconsistently because its Word-based engine lacks full CSS support. Use <table> for borders, padding, and column layouts. Set table widths using width attributes rather than CSS width to ensure Outlook compatibility.
Apply all critical styles as inline CSS on individual elements. Gmail strips <style> blocks in the <head>, so background colors, font families, and button styles must use inline attributes such as style="background-color: #ffffff;". Reserve embedded <style> blocks for progressive enhancement like media queries and hover states that work in Apple Mail and Samsung Email.
Test in Outlook Desktop (2016, 2019, Microsoft 365) and Outlook.com separately. Outlook Desktop uses Word for rendering; Outlook.com uses a modern engine. An email can look perfect on one and broken on the other. Use conditional comments (<!--[if mso]>) to add Outlook-specific table and VML code.
Use progressive enhancement to layer features without breaking the core experience. Build the base email with tables and inline CSS so it is readable in Gmail and Outlook. Then add a <style> block with media queries for responsive layouts, :hover for interactivity, and @import for custom fonts. Clients that ignore the <style> block fall back cleanly.
Related Glossary Terms
CSS in Email
The subset of CSS properties supported across email clients, dominated by inline styles and constrained by Gmail and Outlook limitations.
Email Animation
The use of motion in email through animated GIFs, CSS animations, and video embeds with fallback strategies.
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 Interactive
Email elements that respond to user action using CSS pseudo-classes, checkbox hacks, and limited scripting alternatives.
Email Preview
Email preview tools test rendering across 100+ email clients, providing spam scoring, code analysis, accessibility checks and collaboration features for quality assurance.
Frequently Asked Questions
Microsoft chose to reuse Word's rendering engine for performance and consistency with Office documents. This decision dates back to Outlook 2007 and persists in current versions. It means many CSS properties (margins, floats, background-position) are unsupported.
Inline font-family (using web-safe fonts), color, text-align, font-size (px only), background-color, padding (on table cells), border, and width/height attributes. Avoid margin, float, position, display (flex/grid), and background images on non-table elements.
No. Gmail strips `