How To Create a New CSS Stylesheet for HubSpot

Get FREE HubSpot Tutorial for Beginners PDF
How To Create a New CSS Stylesheet for HubSpot

For those utilizing HubSpot’s content management system (CMS), the ability to create new CSS stylesheets grants users immense flexibility in customizing the look and feel of their website. Whether it’s making minor tweaks to existing styles or implementing a complete overhaul of the site’s design, having control over CSS stylesheets is essential for achieving the desired aesthetic.

In this guide, we will delve into the process of creating new CSS stylesheets for HubSpot. We will cover the necessary steps involved in generating a stylesheet, as well as provide insights into how to manage and utilize these files within the HubSpot CMS effectively.

Step 1. Open Design Tools

In the top navigation under Marketing > Website > Design Tools

Step 2. Create a New File

In the left sidebar look for a folder or create a new folder of where you would like your new CSS stylesheet to be saved. Next, click on the file link and select New File.

Step 3. Select CSS + HubL

Choose the CSS + HubL file option from the list of choices.

Step 4. Edit the CSS Stylesheet

The stylesheet contains some help text to guide you on how to import other stylesheets. To learn more about HubL you can do so in the HubSpot developer documentation.

Final Step. Add the CSS Stylesheet to your Page, Module, or Theme

Once you have your stylesheet created there are various places you can add your stylesheet. For documentation on the various ways to add it read this documentation article.


Following these steps will make customizing your HubSpot page a lot easier and also more efficient. Contact me if you have questions or need help setting things up.

Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Tags: , , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter