Skip to content
  • There are no suggestions because the search field is empty.

How to Add Custom CSS to Individual Pages in HubSpot

This article explains whether CSS is applied globally or only to individual pages within the HubSpot CMS.

Page-Specific CSS

  • CSS can be applied specifically to each page. To ensure that your styles affect only one page, it is recommended to add the CSS directly to the page head HTML.

Adding CSS to a Specific Page

  1. Access the page settings in your HubSpot CMS.
  2. Navigate to the section where you can add code to the page head HTML.
  3. Insert your CSS code in this section to apply styles only to that specific page.

Example CSS for Section Styling

First, you would need to add a style tag. After adding the style tag the CSS can be added.

<style>

Your CSS here....
 
</style>

To add rounded corners to a specific section, you can use the following CSS code:

.dnd_area-row-3-background-color {
    border-radius: 30px;
}

If you want to isolate the CSS to a particular section, you can use a more specific selector:

.row-fluid-wrapper.row-depth-1.row-number-16.dnd_area-row-3-max-width-section-centering.dnd-section.dnd_area-row-3-background-color {
    border-radius: 30px;
}

Important Considerations

  • Changing the order of sections on the page may impact how the CSS is applied.
  • It is advisable to add padding directly through the section settings rather than using CSS for better layout control.
Conclusion

In HubSpot, CSS can be applied specifically to individual pages, allowing for tailored styling. By adding CSS to the page head HTML, you can ensure that your styles do not affect other pages.