Email Template CSS Classes

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;
}

Brand Designer

Customize brand logos, colors, headers, and footers

Email Safe Formatting

HTML and CSS best practices for email clients

Platform

Developer Tools

Help

Email Template CSS Classes

Adding CSS to Your Brand Templates

Brand Designer View

Custom Template View

MJML Rendering

Content Block Classes

Text Classes

Layout Classes

Example

Brand Designer

Email Safe Formatting

​Adding CSS to Your Brand Templates

​Brand Designer View

​Custom Template View

​MJML Rendering

​Content Block Classes

​Text Classes

​Layout Classes

​Example

Brand Designer

Email Safe Formatting

Adding CSS to Your Brand Templates

Brand Designer View

Custom Template View

MJML Rendering

Content Block Classes

Text Classes

Layout Classes

Example