Skip to main content

Template CSS Best Practices for Email

Creating effective CSS templates for email requires understanding the limitations and quirks of email clients. This guide will help you write CSS that works reliably across Gmail, Outlook, Apple Mail, and other major email clients.

tip

Typemail automatically inlines your CSS and applies email-specific optimizations using Juice, ensuring maximum compatibility.

✅ Recommended Practices​

1. Use Specific Selectors​

✅ Good:

.email-container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333333;
  font-size: 28px;
}

.button {
  background-color: #0066cc;
  padding: 12px 24px;
}

❌ Avoid:

* {
  font-family: Arial;  /* Universal selector affects everything */
}

div {
  margin: 10px;  /* Too generic, hard to override */
}

2. Minimize !important Usage​

✅ Good:

.primary-button {
  background-color: #0066cc;
  color: white;
}

/* Only use !important for critical overrides */
@media screen and (max-width: 600px) {
  .mobile-hide {
    display: none !important;
  }
}

❌ Avoid:

p {
  margin: 16px !important;
  color: #333 !important;
  font-size: 16px !important;
}

3. Avoid External Resources​

❌ Never use:

@import url('https://fonts.googleapis.com/css?family=Roboto');

.background {
  background-image: url('https://example.com/bg.jpg');
}

✅ Instead:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Use data URLs or inline images in HTML for critical visuals */

4. Use Inline-Friendly Properties​

✅ Well-Supported:

.text {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 16px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 4px;
}

⚠️ Limited Support:

.element {
  position: fixed;  /* Not supported in most email clients */
  position: absolute;  /* Very limited support */
  transform: rotate(45deg);  /* Inconsistent support */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* Works in some clients */
}

5. Accessibility-First Font Sizes​

✅ Recommended:

body {
  font-size: 16px;  /* Base size */
}

h1 {
  font-size: 28px;  /* Large and readable */
}

p {
  font-size: 16px;  /* Never below 14px for body text */
}

.small-text {
  font-size: 14px;  /* Minimum for readability */
}

❌ Avoid:

.tiny {
  font-size: 8px;  /* Unreadable on mobile */
}

.micro {
  font-size: 6px;  /* Accessibility violation */
}

⚠️ Email Client Limitations​

Animations & Transitions​

❌ Avoid:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated {
  animation: fadeIn 1s;
  transition: all 0.3s;
}
warning

CSS animations are not supported in most email clients, including Outlook and Gmail. They will simply be ignored.

Positioning​

❌ Avoid:

.fixed-header {
  position: fixed;  /* Doesn't work in email */
  top: 0;
}

.absolute-badge {
  position: absolute;  /* Very limited support */
  right: 10px;
}

✅ Use instead:

/* Use table-based layouts for complex positioning */
.container {
  display: block;
  position: relative;  /* Safer alternative */
}

Flexbox & Grid​

⚠️ Limited support:

.flex-container {
  display: flex;  /* Works in Apple Mail, not Outlook */
  justify-content: space-between;
}

.grid {
  display: grid;  /* Very limited support */
}

✅ Reliable alternative:

/* Use tables for layout (yes, really!) */
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  vertical-align: top;
}

📱 Responsive Design​

Media Queries​

✅ Recommended approach:

/* Base styles (mobile-first) */
.container {
  width: 100%;
  padding: 10px;
}

/* Desktop styles */
@media screen and (min-width: 600px) {
  .container {
    width: 600px !important;
    padding: 20px !important;
  }
  
  .mobile-only {
    display: none !important;
  }
}
tip

Keep media queries in <style> tags (Typemail preserves them automatically). Use !important in media queries for better compatibility.

Mobile-Friendly Patterns​

/* Stacked layout on mobile */
@media screen and (max-width: 600px) {
  .column {
    width: 100% !important;
    display: block !important;
  }
  
  /* Increase touch targets */
  .button {
    min-height: 44px !important;
    padding: 14px 20px !important;
  }
  
  /* Increase spacing */
  h1 {
    font-size: 24px !important;
    margin: 16px 0 !important;
  }
}

🎨 Color & Typography​

Safe Color Formats​

✅ Use:

.element {
  color: #333333;  /* Hex */
  background-color: rgb(51, 51, 51);  /* RGB */
  border-color: rgba(0, 0, 0, 0.1);  /* RGBA (good support) */
}

⚠️ Avoid:

.element {
  color: hsl(0, 0%, 20%);  /* HSL has inconsistent support */
  background: linear-gradient(to right, #000, #fff);  /* Limited support */
}

Font Stacks​

✅ Recommended:

body {
  /* System fonts (universally available) */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               Helvetica, Arial, sans-serif;
}

.serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.mono {
  font-family: 'Courier New', Courier, monospace;
}

🔧 Common Patterns​

Buttons​

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0066cc;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}

.button:hover {
  background-color: #0052a3;  /* Hover works in some clients */
}

Tables​

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

th {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #dddddd;
}

td {
  padding: 12px;
  border: 1px solid #dddddd;
}

Container​

.email-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
}

🧪 Testing Recommendations​

  1. Test in major clients:

    • Gmail (web, iOS, Android)
    • Outlook (2016, 2019, 365, web)
    • Apple Mail (macOS, iOS)
    • Yahoo Mail
    • Thunderbird

  2. Use validation tools:

  3. Check on devices:

    • Desktop (various screen sizes)
    • Mobile (iOS and Android)
    • Dark mode vs. light mode

📚 Additional Resources​

Need Help?

If you're unsure about a specific CSS property, check Can I Email for compatibility information.