How to share CSS styles across email templates?

Occasional Contributor

I'm having trouble achieving what I think should be a straightforward use case: I've defined a bunch of global, standard CSS styles that I want to apply across multiple email templates, but I don't know how to do so. The goal is to be able to edit these styles in a single place and have the changes reflected across all email templates.


This is easy to do in page templates where you have the option of attaching stylesheets, but I see no such option in email templates. So far I've tried including my separate stylesheet file in the "Additional head markup" section of the template builder, like so


<style type="text/css" data-hse-inline-css="true">
{{ get_public_template_url('Custom/Email/MINE/email-styles-master.css') }}

But these styles are not coming through. Is there a proper way to do this (perhaps using HubL tags)?

2 Replies 2

Hi @needle ,

Have you tried to edit the code as following:



<style type="text/css" data-hse-inline-css="true">
{{ get_public_template_url('Custom/Email/MINE/email-styles-master.css') }}



<style type="text/css" data-hse-inline-css="true" href="https://www.YOURDOMAIN.COM/Custom/Email/MINE/email-styles-master.css">

so that the "href" part is the complete URL to the CSS? You can find it in the <head>-tag of a template when you insert it.


Furthermore it's possible to add a "external" CSS file to the E-Mail template - but you shouldn't do this. Most likely the E-Mail client will display many issues and/or block the Mail because of "spam".


Unfortunately the best way to achive a great looking E-Mail template is still by doing it with inline-styling(and tables). 


Here are some links for you what you can and can't use in E-Mail styling


- CSS Support Guide | Campaign Monitor

Email Client CSS Support | Mailchimp

- Can I Use in HTML Emails





check Did my post help answer your query? Help the Community by marking it as a solution
Occasional Contributor

Thank you for the reply @Anton. I tried to edit the code as you suggested, but it results in an error in the editor. I added my CSS as a file in the HubSpot file manager, and referenced it like this in the template

<style rel="stylesheet" data-hse-inline-css="true" href="[HubSpot_ID]/Global-Assets/global-email-css.css">

However, this is throwing an error in the editor:

Error:Additional <head> markup
Syntax error in "[missing {{token}} value]"

To be clear, my goal isn't to dump these CSS rules in the email head because, as you say, they need to be inlined for the email to render correctly. Is there a way to include global CSS styles in my HubSpot email templates, and have them be inlined by HubSpot?