Last updated: August 6, 2021
CSS (Cascading Style Sheets) are coded files that select elements of your page and control their presentation. Think of your custom template's HTML as the bones of your website and the CSS as the skin of your site.
This article walks through creating, publishing, and attaching a CSS file in HubSpot. You can learn how to make simple design changes to a particular page here. If you're using a theme template, learn how to edit your theme settings.
Once you have created or opened an existing CSS file, make your edits in the code editor. In addition to standard CSS, the code editor supports HubL variables and macros to make maintaining your CSS easier. To preview how your HubL will render, click to toggle the Show output switch on at the top of the editor. A panel will open on the right with the rendered preview.
To see a list of standard CSS selectors for HubSpot templates, check out Boilerplate CSS.
Before publishing, check your code for HubL errors. There are three places to find HubL errors or warnings in a custom module or coded file:
Errors preventing you from publishing will be in red, while general warnings will be in yellow. At the bottom of the code editor, click Show details to see more information on the errors in the error console and Hide details to collapse the error console.
In the error console, there will be links to wherever there are HubL errors or warnings in your code or custom module. Hover over the red error indicators on the left-hand side of the code editor to see the error or warning in your code. Clicking the error will cycle your cursor to all errors or warnings on that line. Clicking a scrollbar annotation will bring you to that part of the file.
You can also click a line number within the code editor and have the URL of the file update accordingly. This allows you to share a link to your code with others and direct them to exactly where you're working within the file.
After editing the file, click Publish changes in the upper right. If you'd like to call this stylesheet in another coded template, copy the sheet's URL by clicking Actions > Copy public URL in the left sidebar menu.
In HubSpot, you can attach stylesheets to your content in a few different ways. Below is the order in which attached stylesheets are linked on your site:
** Required for drag and drop layouts
*** Recommended method of stylesheet attachment for template layouts
To attach stylesheets to a template, open the template in your design manager. In the right sidebar menu under Head and Body Options, select a file from the Add dropdown menu beside Linked stylesheets.
You can edit or remove a stylesheet that's already attached by hovering over it and clicking Edit to make changes to it or the X to remove it.
After adding a stylesheet, click Publish changes in the upper right-hand corner to apply your changes to the live pages(s) using the template.
Please note: this option isn't available for theme templates. Learn how to edit your theme settings.
To add or remove a page-specific stylesheet from the settings section of the page editor:
You can also disable stylesheets that are inherited by the page from the template or domain. When disabled, these stylesheets will not be applied to your page:
Please note: theme templates must include the annotation enableDomainStylesheets: true in order to use domain-level stylesheets. Learn more about template annotations.
To add or remove a stylesheet from all content on a domain:
Designers can build website, landing page and blog templates from scratch using HTML. Marketing Hub...
With personalization tokens, you can show personalized content to your contacts based on their property...
Smart content modules display different versions of your content based on viewer category. For example, you...