Skip to main content
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

Brand Designer View

​
Custom Template 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

ClassTargets
.c--block-actionAction (button/link) blocks
.c--block-dividerDivider blocks
.c--block-imageImage blocks
.c--block-listList blocks
.c--block-markdownMarkdown blocks
.c--block-quoteQuote blocks
.c--block-templateTemplate (Handlebars) blocks
.c--block-textText blocks

​
Text Classes

ClassTargets
.c--text-textBody text
.c--text-subtextSubtext / secondary text
.c--text-h1Heading 1
.c--text-h2Heading 2
.c--text-quoteQuote text style

​
Layout Classes

ClassTargets
.c--email-headerEmail header section
.c--email-header imgLogo image in the header
.c--email-bodyEmail body section
.c--email-footerEmail footer section
.c--socialSocial 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;
}

Brand Designer

Customize brand logos, colors, headers, and footers

Email Safe Formatting

HTML and CSS best practices for email clients