Email Template CSS Classes
Courier’s standardized CSS classes allow you to manually set styles in your Brand email templates.
Courier’s standardized CSS classes allow you to customize element styles in your Brand email templates.
Adding CSS to your Brand Email Notification Templates
Courier email template CSS is set using inline styles.
You can customize the <style> element in the <head> section of your Brands using custom templates as well as brands built using the Designer UI.
OVERWRITING
To overwrite existing styles, you have to use !important.
Brand Designer View
Brand Designer View
Custom Template View
Custom Template View
MJML Rendering
Your email template CSS is rendered using MJML. This creates child components out of each component. Content is usually nested within a child element of one of the below CSS classes. To select all child elements recursively, use the universal selector(*), for example:
TESTING YOUR CHANGES
We recommend that you carefully test the resulting changes to your CSS classes.
You can do this by creating an email notification with the relevant block types, then using the preview tab to observe the effect of your CSS changes.
Content Block CSS Classes
-
Action block:
.c--block-action -
Divider block:
.c--block-divider -
Image block:
.c--block-image -
List block:
.c--block-list -
Markdown block:
.c--block-markdown -
Quote block:
.c--block-quote -
Template block:
.c--block-template -
Text block
.c--block-text
Text CSS Classes
-
.c--text-text -
.c--text-subtext -
.c--text-h1 -
.c--text-h2 -
.c--text-quote
Other CSS Classes
-
.c--email-footer -
.c--email-header -
.c--email-header img(logo) -
.c--social -
.c--email-body