Courier exposes standardized CSS classes on every email template element. Use these to customize the look and feel of your branded email notifications.
Adding CSS to Your Brand Templates
Courier email templates use inline styles by default. You can add custom CSS in the <style> element in the <head> section of your brand; this works with both the Designer UI and custom MJML/Handlebars templates.
You must use !important on all custom CSS rules. Courier renders email templates with MJML, which compiles to inline styles. Inline styles always win over class-based rules unless you add !important. Without it, your CSS classes will have no visible effect. Brand Designer View
Custom Template View
MJML Rendering
Courier renders email templates using MJML, which compiles your template into nested HTML <table> structures. Each Courier block becomes a set of wrapper elements, so your target content is usually nested inside the CSS class rather than directly on it. Use the universal selector (*) to reach all child elements:
.c--block-text * {
color: red;
}
Test your CSS changes carefully. Create an email notification with the relevant block types and use the preview tab to verify the results.
Content Block Classes
| Class | Targets |
|---|
.c--block-action | Action (button/link) blocks |
.c--block-divider | Divider blocks |
.c--block-image | Image blocks |
.c--block-list | List blocks |
.c--block-markdown | Markdown blocks |
.c--block-quote | Quote blocks |
.c--block-template | Template (Handlebars) blocks |
.c--block-text | Text blocks |
Text Classes
| Class | Targets |
|---|
.c--text-text | Body text |
.c--text-subtext | Subtext / secondary text |
.c--text-h1 | Heading 1 |
.c--text-h2 | Heading 2 |
.c--text-quote | Quote text style |
Layout Classes
| Class | Targets |
|---|
.c--email-header | Email header section |
.c--email-header img | Logo image in the header |
.c--email-body | Email body section |
.c--email-footer | Email footer section |
.c--social | Social media links section |
Example
To change the background color and font of all text blocks:
.c--block-text * {
font-family: Georgia, serif !important;
background-color: #f9f9f9 !important;
}
.c--text-h1 * {
color: #1a1a1a !important;
font-size: 24px !important;
}
