Create, edit, and attach CSS files to style your site

Applies to:

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.

Please note: if you weremigrated to HubSpotby HubSpot's Technical Services team, you'll already have some default CSS files created for you. If needed, work with your designer to modify these files to adjust the look of your site.

In the dialog box, clickCSS stylesheet. Then enter a name for your CSS stylesheet and clickCreate.

Edit the 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 supportsHubL variables and macrosto make maintaining your CSS easier.

To see a list of standard CSS selectors for HubSpot templates, check outBoilerplate 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:

In the error console along the bottom of the code editor.

In the error gutter along the left-hand side of the code editor.

In the scroll bar on the right-hand side of the editor.

Errors preventing you from publishing will be in red, while general warnings will be in yellow. At the bottom of the code editor, clickShow detailsto see more information on the errors in the error console andHide detailsto 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-hand corner. If you'd like to call in this stylesheet in another coded template, copy the sheet's URL by clickingActions>Copy public URLin the left sidebar menu.

Attach to template

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:

public_common.css * - a stylesheet primarily used by HubSpot's app, but also for certain site features.