Understand Hubspot page styling sources

When you manage website content in Hubspot, it is essential to understand where a page’s styling originates so you can safely edit templates, modules, and stylesheets without breaking your design. This guide walks through how styling is applied and how to trace it inside the design manager.

How Hubspot applies CSS to pages

The styling of any page is a combination of several assets in your theme or custom setup. In the design tools, these assets are associated with each page and loaded together in the browser.

In most cases, page styling comes from:

• Theme-level CSS files
• Template-level stylesheets or included partials
• Module-specific CSS
• Inline styles or style fields defined in content settings

To reliably adjust a design, you must identify which of these layers is responsible for each visual element on your Hubspot page.

Open the design manager in Hubspot

To locate the source of a page’s styling, start by opening the design manager where templates, modules, and CSS files are stored.

1. Log in to your Hubspot account.
2. In the main navigation, go to Marketing > Files and Templates > Design Tools.
3. Use the left sidebar to browse themes, templates, and coded files.

The design manager is the central place to see how layout and styling elements connect.

Inspect templates for Hubspot page styling

Each page is based on a specific template, and that template usually references shared CSS files. To understand styling inheritance, inspect the page’s template first.

1. From design tools, locate the theme or folder that contains your page template.
2. Click the template to open it in the layout editor.
3. Review the template’s settings and any attached stylesheets.

Key areas to check inside the template:

• Head HTML: look for <link> tags referencing CSS files.
• Global partials: header and footer partials may load additional styles.
• Theme fields: some visual options map to CSS variables used throughout Hubspot templates.

Track stylesheet sources in Hubspot

Once you know the template, the next step is to confirm which stylesheets are actually affecting the page. In Hubspot, a page can load CSS from multiple locations.

Find attached stylesheets in the template editor

Within the template editor, check:

• The Linked CSS files area or similar settings where theme stylesheets are associated.
• Any require_css or include statements in coded templates that pull in shared style partials.

These files usually control your main typography, color palette, layout grid, and global spacing.

Confirm styles in the page editor

Sometimes, individual pages override template defaults. In the page editor:

1. Open the page in the content editor.
2. Click Settings or the design-related tab.
3. Look for a field that allows adding custom header HTML or specifying additional stylesheets.

If extra CSS is added at the page level, it will layer on top of your default Hubspot theme styles.

Inspect module-level styling in Hubspot

Modules can introduce their own CSS rules. When a visual issue affects a specific component, check that module’s styling.

Locate the module in the design manager

1. In the page editor, click the module that looks incorrect.
2. Use the information panel to find the module’s name and location.
3. Open design tools and search for that module in the file tree.

When you open the module in the editor, review:

• Module CSS area: embedded styles scoped to the module.
• Fields that control styles: color pickers, spacing, alignments, and typography options that output CSS.
• Inline style bindings: expressions that set style attributes based on field values.

Understand module CSS specificity

Module CSS often uses class names or automatically generated selectors that can override more general theme styles. If a change to theme CSS appears to have no effect, module-level selectors may be applying more specific rules.

Use browser dev tools with Hubspot pages

To pinpoint the source file for any visible style, combine Hubspot design tools with your browser’s developer tools.

1. Open the published page in your browser.
2. Right-click and select Inspect or open developer tools.
3. Select the element whose style you want to trace.
4. In the Styles pane, note the CSS rule, selector, and filename.

This method lets you match the stylesheet name and line number shown in the browser with the corresponding file in design tools, making it much easier to edit the correct Hubspot asset.

Troubleshooting common Hubspot styling conflicts

When styles do not behave as expected, work through likely sources in a consistent order.

1. Check theme and template CSS

• Verify that the correct theme is applied to the page.
• Confirm there are no outdated or duplicate stylesheets linked.
• Look for overly broad selectors that may be affecting multiple modules unintentionally.

2. Review module overrides

• Open the module and scan for hard-coded colors, fonts, or sizes.
• Check if any fields are overriding global settings.
• Reduce excessive specificity in module CSS so core Hubspot theme rules can work properly.

3. Look for page-level custom CSS

• Remove or comment out experimental CSS added in page settings.
• Move stable styles into the main theme stylesheet for easier maintenance.

Best practices for managing Hubspot styles

To keep your design consistent and easier to maintain over time, follow a few simple patterns when you build or update assets in Hubspot.

• Centralize shared styles in theme or global stylesheets.
• Limit page-level CSS to truly unique cases.
• Use module fields for controlled visual variations instead of inline styles.
• Document which templates and modules rely on which stylesheets.

By following these steps, you will always know where to look when something changes on a page and how to adjust it safely.

Further learning on Hubspot styling

You can read the original product documentation on how page styling works in the design manager on the official Hubspot knowledge base. It includes detailed screenshots and technical notes for developers and designers.

Visit the official guide here: Understand the source of a page’s styling in Hubspot.

If you need strategic help with implementation, theme planning, or broader marketing automation, you can also consult a specialist agency. Learn more at Consultevo.

By combining the design manager, template and module inspection, and browser dev tools, you gain full visibility into how styling is assembled for every Hubspot page and can update your site with confidence.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`