Yes, it's possible to add custom CSS styling to your visual email templates!
This is a great option if you want to take advantage of our visual template editor, but still would like the flexibility to make additional customizations with CSS.
NOTE: You also have the option to create your email template using entirely HTML & CSS if you feel comfortable doing so, and forgo the visual editor altogether. Here's how!
P.S. Scroll down for some examples of CSS that you can add to your templates!
How to add CSS to the visual template editor
1. At the bottom of your email template, add an HTML block
2. Click 'Edit' to the right of your new HTML block
You may need to hover over the HTML block to reveal the 'Edit' button.
Alternatively, click anywhere in your HTML block.
3. Add your custom CSS in between <style> tags, and then click 'Save'
As soon as you click 'Save', your template should update to show the styling changes!
NOTE: Since we're adding CSS instead of HTML, nothing will show up in the HTML block itself when looking at your template preview.
This is normal, but as a side effect, you may have to hover around the area where your HTML block was added in order to reveal it:
Code snippets to get you started
Here are some code snippets that you might find helpful:
Increase spacing between paragraphs
p { margin-bottom: 10px; }Add a margin around your email
.email { padding: 0 20px; }Remove dotted border above footer
.email-body-footer { border-top: none !important; }TIP: If your CSS changes aren't showing, try increasing its priority by adding !important right before the semi-colon (like in the third example above).
The <style> tag
❗️ Make sure your CSS code is enclosed in the correct tags within your HTML block! <style> should be at the beginning of your CSS code, and </style> should be at the end (note the slash in the closing tag).
Here's an example of the CSS you could add to your HTML block in order to increase the spacing between paragraphs, as well as add a margin around your email:
<style>
p { margin-bottom: 10px !important; }
.email { padding: 0 20px; }
</style>
The <style> tag indicates that the code you are adding is CSS (rather than HTML), so all of your CSS code should go in between those tags within your HTML block.
NOTE: Our WYSIWYG editor is pretty great, but it's not perfect (yet!). Some CSS classes don't get loaded the same way in the editor as when an email is actually drafted and sent.
If you aren't seeing the effects of your CSS in the way you expect, it's a good idea to load up the template in a Broadcast or Sequence email and use the Preview functionality to see how it will look once it's sent.
It may display the same as in the editor, but in some cases it might look different.