Adding CSS to your Brand email notification templates

Courier email template CSS is set using inline styles. To overwrite existing styles, you'll have to use !important.

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.

Brand Designer view

Custom Template view

MJML Rendering

Your email template CSS is rendered using MJML. This creates child components out of each component. This means that any style changes you make could apply to multiple children and multiple elements. There is also the potential that changes will not affect the element with the class itself.

We recommend that you carefully test the resulting changes to your CSS classnames.

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.

CSS classnames

Content block type classnames

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 classnames

.c--text-text,

.c--text-subtext,

.c--text-h1

.c--text-h2

.c--text-quote

Other classnames

.c--email-footer

.c--email-header

.c--email-header img (logo)

.c--social

.c--email-body

Did this answer your question?