Last updated
HTML Email Development Challenges
HTML email is notoriously difficult because email clients have inconsistent and
often outdated HTML/CSS support. Gmail strips <style> blocks in some contexts.
Outlook uses Microsoft Word's rendering engine, which has poor CSS support.
The solution is to use table-based layouts and inline CSS — techniques that were
abandoned for web development in the early 2000s but are still required for email.
Email Client CSS Support
| Feature | Gmail | Outlook | Apple Mail |
|---|---|---|---|
| Flexbox | No | No | Yes |
| CSS Grid | No | No | Yes |
| Media queries | Partial | No | Yes |
| Web fonts | No | No | Yes |
| Background images | Yes | Partial | Yes |
| Inline styles | Yes | Yes | Yes |
Basic Email Template Structure
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Email Subject</title>
</head>
<body style="margin:0;padding:0;background:#f4f4f4;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding:20px 0;">
<!-- Email container -->
<table width="600" cellpadding="0" cellspacing="0" border="0"
style="background:#ffffff;border-radius:8px;">
<tr>
<td style="padding:40px;font-family:Arial,sans-serif;font-size:16px;color:#333;">
<h1 style="margin:0 0 20px;font-size:24px;">Hello!</h1>
<p style="margin:0 0 20px;">Your email content here.</p>
<a href="https://example.com"
style="display:inline-block;padding:12px 24px;background:#3498DB;
color:#fff;text-decoration:none;border-radius:4px;">
Click Here
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>