Create, edit, and attach CSS files

Cascading stylesheets (CSS) control the visual presentation of your site's pages by selecting and styling page elements. Use the design manager to create new CSS files, edit existing ones, and attach them to templates, specific pages, or entire domains.

For simple design changes to a specific page, learn more about editing page content in the content editor. If you're using a theme template, learn more about editing your theme settings.

Create a new CSS file

1. In your HubSpot account, click More, then navigate to Content > Design Manager. If More doesn't appear in your account, navigate to Content > Design Manager directly.
2. In the finder, click File > New file on the upper left.
3. In the dialog box, click the dropdown menu and select CSS + HubL. 
4. Click Next.
5. Enter a name for your file in the File name field.
6. To change the location of the file, click Change. In the pop up box, select a new file location. 
7. When finished, click Create.

Edit a CSS file

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 see a list of standard CSS selectors for HubSpot templates, check out Boilerplate CSS.

1. { local.navDesignManager }}
2. In the finder, click File > New file or open an existing CSS file.
3. In the code editor, enter or update the CSS to make your edits. 

To preview how your HubL will render, click the Show output switch on at the top of the editor. A panel will open on the right with the rendered preview.

Check for errors

Before publishing, check your code for HubL errors. Errors appear in the console at the bottom, the error gutter on the left, and the scroll bar on the right of the code editor.

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.

Publish a CSS file

After editing your CSS file, click Publish changes in the upper right. To call this stylesheet in another coded template, click the Actions dropdown menu in the finder and select Copy public URL. 

Attach stylesheets to assets

Attach stylesheets to your templates, individual pages, or to an entire domain. Stylesheets are applied in a specific order based on where they're attached. The list below reflects the order in which they are applied on your site:

1. public_common.css (required): a stylesheet primarily used by HubSpot's app, but also for certain site features.
2. Header HTML: link tags added to the global <head> of your site in Content > Page settings.
3. Layout.css (required for drag-and-drop layouts): default responsive CSS file attached to all drag-and-drop template layouts.
4. Attached stylesheets (Pages): stylesheets attached to your entire site in Content > Page settings.
5. Attached stylesheets (Blog): stylesheets attached to your blog (overrides site global sheets) in Content > Blog settings.
6. Linked stylesheets (recommended for template layouts): stylesheets attached in the template layout.
7. Additional <head> markup in the template: link tags added to the <head> of a particular template layout.
8. Page-specific stylesheets: stylesheets attached in a page's settings.
9. Page head HTML: link tags added to the <head> of a particular page in the page's settings.

Attach stylesheets to templates

Stylesheets can be attached to drag and drop templates in the inspector within the design manager. For coded templates, stylesheets are added directly in the code editor.

Drag and drop templates

1. In your HubSpot account, click More, then navigate to Content > Design Manager. If More doesn't appear in your account, navigate to Content > Design Manager directly.
2. In the finder, click the name of your drag and drop template file.
3. In the inspector, click the Add dropdown menu in the Linked stylesheets section and select your stylesheet. To remove a stylesheet, click X.
4. When finished, click Publish changes in the upper right to apply your changes to the live pages using the template.

Coded templates

For coded templates, stylesheets are attached directly in the code editor using <link> tags or the HubL tag in the <head> of the file. Learn more about coded templates in the developer documentation.

Attach stylesheets to a specific page

Please note: this option isn't available for theme templates. Learn how to edit your theme settings.

To attach a page-specific stylesheet from the settings section of the content editor:

1. Navigate to your content:

   • Website Pages: In your HubSpot account, click More, then navigate to Content > Website Pages. If More doesn't appear in your account, navigate to Content > Website Pages directly.
   • Landing Pages: In your HubSpot account, click More, then navigate to Content > Landing Pages. If More doesn't appear in your account, navigate to Content > Landing Pages directly.
2. Click the name of your page.
3. In the content editor, click the Settings menu and select Advanced. 
4. In the dialog box, in the Stylesheets section, click the Attach a stylesheet dropdown menu and select a stylesheet. To remove a stylesheet, click X next to the stylesheet.
5. To turn off stylesheets that are inherited from the template or domain, click the dropdown menu next to the stylesheet and select Disabled.

Attach domain stylesheets

Please note: theme templates must include the annotation enableDomainStylesheets: true in order to use domain-level stylesheets. Learn more about template annotations.

To attach a stylesheet to an entire domain:

1. In your HubSpot account, click the settings icon in the top navigation bar.
2. In the sidebar menu, click Content > Pages.
3. Click the dropdown menu to select the domain you want to update the settings for.
4. On the Templates tab, in the CSS & Stylesheets section, click + Add style sheet. To remove a stylesheet, click the X next to the attached stylesheet.
5. Click Save.

Please note: when downgrading to HubSpot’s Starter or free tools, attached domain-level stylesheets will remain active until you remove them. Once all stylesheets are removed, you can no longer attach stylesheets at the domain-level. Learn more about downgrading a subscription.