How to create, edit, and attach CSS files to style your site

Last updated: November 9, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

HubSpot makes it easy for designers to author and maintain stylesheets within Design Manager. CSS or Cascading Style Sheets are coded files that select elements of your page and control their presentation. You can think of the templates that you create and their HTML as the bones of your website and the CSS as the skin of your site.

This article will walk you through creating, publishing, and attaching a CSS file in HubSpot. If you are not comfortable with working with CSS or are looking to just make simple design changes on a particular page, check out this article about how to use the Style tab.

 

Navigate to Design Manager

To create or edit an existing CSS file, navigate to Design Manager (Content > Design Manager).

Navigate to Design Manager
If you were migrated to HubSpot by HubSpot's Technical Services team, you will already have some default CSS files created for you. If needed, you can have your designer modify these files to adjust the look of your site. The names and explanations of the files added by the Technical Services team can be found here. After locating the file, you can skip to step 3.

Create a new coded file

Click the Coded Files folder and click the blue New coded file button

New coded file

Click on the Code Editor option and Page option. Next, click the Create button.

Name and save the file

Select a folder to create the new CSS stylesheet in. You can also create a new folder, by selecting the parent folder and clicking New Folder and naming the folder. Next, give your CSS file a name with a .css extension. Finally, click Save to create your new CSS file. 

Name and save file

Edit CSS

Once you have created or opened an existing CSS file, you can edit in in the code editor. In addition to standard CSS, HubSpot's 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

Edit CSS

Publish file

Click Publish changes to compile and minify the CSS file. 

Publish changes

Attach to template

To attach stylesheets to a template layout, open the template and click Actions > Edit Head. In the Attach Stylesheets section, you can remove any existing stylesheets by clicking the to the right. 

To add your new stylesheet, click + Add Stylesheets. Select the stylesheet, then click Add. Click Save, then Publish Changes.

HubSpot Help article screenshot
While you can also attached CSS files at the domain or at the page level, it is recommended to always attach at the template level. You may also want to disable domain stylesheets to reduce the chances of any conflicting code. To learn more about where CSS can be attached, check out this article.

Primary CSS

HubSpot Academy

Best practices

What will ultimately go in your Primary CSS will depend on the complexity of your site's design, but here are some recommendations:
  • Responsive CSS - you can include HubSpot's required_base.css code to make your templates responsive.
  • Normalize CSS - any code that you want to add to all of your pages to help browsers render your pages consistently can be added to primary CSS.  
  • Container max-width - HubSpot's COS is automatically responsive, but you still need to specify the max-width of your pages content areas.  For more information about applying a max-width to your containers check out this article.
  • Fluid media code - make images and video responsive. The specific CSS for making images responsive can be found here.
  • Responsive table code - tables can break responsiveness, so any code that you add to style tabular data can be added to Primary CSS.
  • Styling of other standard modules - styling any of the standard modules covered in the last section of this guide.  For example, you may want to add styling for the slider module in Primary CSS, so it looks and behaves consistently across all templates.
Read more

Primary CSS is a CSS file that gets automatically included in all of your templates (unless disabled). Primary CSS will save your designers time, especially if your company plans on creating several themes to use across your different tools in HubSpot.

If you end up creating multiple versions of a site's look or require differently branded campaigns, you may find yourself writing a lot of the base code over and over again. In this case, Primary CSS can give a home to all your global code, while additional stylesheets can be written for various campaign-specific aesthetic decisions. 

Previous article:

Next article: