Skip to main content

Documentation Index

Fetch the complete documentation index at: https://www.courier.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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