What is the order in which stylesheets are attached to HubSpot pages?

Last updated: October 12, 2015

HubSpot allows you to attach stylesheets to your content in many different ways. Below is the order in which stylesheets attached through the app are linked on your site:

  1. public_common.css * - a stylesheet primarily used by HubSpot's app, but also for certain site features
  2. Content Settings > Page Publishing > Header HTML - link tags added to the global <head> of the site
  3. Content Settings > Blog > Header HTML - link tags added to the <head> of a particular blog 
  4. Layout.css **- default responsive CSS file attached to all drag and drop template layouts
  5. Primary CSS - hs_default_custom_style.css is a stylesheet generated by the Primary CSS feature in HubSpot
  6. Content Settings > Page Publishing > Attached Stylesheets - stylesheets attached to your entire site
  7. Content Settings > Blog > Attached Stylesheetsstylesheets attached to blog (overrides site global sheets)
  8. Template > Edit Head > Attach stylesheet *** - stylesheets attached at in the template layout
  9. Template > Edit Head> Additional HTML Head Markup for this Layout link tags added to the <head> of a particular template layout 
  10. Page specific stylesheets - stylesheets attached from with a page's Options tab
  11. Page head HTML - link tags added to the <head> of a particular page


If you are using coded templates numbers 1-7 and 10-11 render as part of the {{ standard_header_includes }} tag. Template level stylesheets would be coded before or after that tag.

* Required

** Required for drag and drop layouts

*** Recommended method of stylesheet attachment for template layouts

Was this article helpful?