Custom CSS in emails

Add custom CSS to your newsletters and templates for fine-grained control over styling, layout, and visual effects beyond Letterhead’s drag-and-drop design tools.

Access the CSS editor

1. Open a newsletter or template draft in the editor.
2. Look for Code, CSS, or Advanced Styling in the editor menu or toolbar (TODO: confirm exact entry point and button label).
3. Click to open the custom CSS editor.

Write custom CSS

1. The CSS editor displays a text area where you can write standard CSS rules.
2. Use selectors and properties to style elements throughout the email:

   .my-block {
     background-color: #f0f0f0;
     padding: 20px;
     border-radius: 8px;
   }

3. Apply classes to blocks or elements in the editor to target them with CSS.
4. Click Save or Apply to preview changes.

Preview and test

1. After saving, switch to the Preview view to see how the custom CSS renders.
2. Test in multiple email clients (Gmail, Outlook, Apple Mail, etc.) if possible, as CSS support varies.
3. TODO: confirm if Letterhead provides cross-client preview or notes on CSS limitations.

CSS limitations and best practices

• Use inline or <style> blocks; external stylesheets may not be supported in all email clients.
• Avoid advanced CSS features like CSS Grid or Flexbox unless you’ve tested compatibility with your audience’s email clients.
• Keep media queries simple for responsive designs (e.g., @media (max-width: 600px)).
• Test colors, fonts, and spacing across clients before sending.
• TODO: confirm exact CSS limitations and which properties are safe to use.

Save and send

1. Once your custom CSS is applied and tested, close the editor.
2. Proceed with Send or Schedule your newsletter normally.
3. Custom CSS is rendered inline when the email is sent.

Next steps

• Design responsive emails to ensure layouts work on mobile.
• Use templates to reuse custom CSS across multiple newsletters.