Loading...
Skip to main content

Email Template CSS Classes"

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:


.c--block-text * {
    color: red;
}

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