Skip to main content
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.
OVERWRITINGTo overwrite existing styles, you have to use !important.

​
Brand Designer View

Brand Designer View

Brand Designer View

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

.c--block-text * {
    color: red;
}
TESTING YOUR CHANGESWe 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