Navigate to Design Manager
To create or edit an existing CSS file, navigate to Design Manager (Content > Design Manager).
Create a new coded file
Click the Coded Files folder and click the blue New coded file button
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.
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.
Click Publish changes to compile and minify the CSS file.
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 X to the right.
To add your new stylesheet, click + Add Stylesheets. Select the stylesheet, then click Add. Click Save, then Publish Changes.
- 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.
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.