Style Your Site with HubSpot CSS Files

Using HubSpot design tools, you can create, edit, and attach CSS files to control the look and feel of your website templates and pages without leaving your HubSpot account.

This guide walks you through every step, from creating a new stylesheet to attaching it to templates, theme settings, and individual pages.

Overview of HubSpot CSS Management

In HubSpot, styles are typically managed with dedicated CSS files stored in the design manager. These stylesheets can be:

• Linked to specific templates
• Applied to theme settings at the site level
• Attached directly to individual pages or blog posts

Understanding how these options work together helps you keep your design system organized and easy to maintain.

Access the HubSpot Design Manager

To work with CSS files, you first need to open the design manager tool.

1. In your HubSpot account, go to the main navigation.
2. Hover over Marketing, then select Files and Templates.
3. Click Design Tools to open the design manager.

The design manager is where all your coded files, including templates, modules, JavaScript, and CSS stylesheets, are stored and edited.

Create a New CSS File in HubSpot

Within the design manager, you can create a new stylesheet to style your site or a specific set of templates.

1. In the left sidebar file tree, navigate to the folder where you want the stylesheet to live.
2. Click the File menu at the top left.
3. Select New file.
4. In the dialog, choose CSS as the file type.
5. Give your CSS file a clear name (for example, main-styles.css or blog-theme.css).
6. Select the folder location if needed, then click Create.

Your new CSS file opens in the editor, ready for you to add styles.

Edit HubSpot CSS Files

Once a stylesheet exists, you can edit it any time from the same design manager interface.

1. In the left sidebar, locate your CSS file.
2. Click the file name to open it in the code editor.
3. Add or modify your CSS rules directly in the editor.
4. Use comments to keep sections organized, such as layout, typography, header, and footer styles.
5. Click Publish changes or the appropriate save option when finished.

The changes will apply wherever the stylesheet is attached, so it is important to test carefully after each update.

Attach HubSpot CSS to Templates

You can attach a stylesheet directly to a template so that any page using that template automatically gets the correct styles.

1. Open the template you want to style in the design manager.
2. In the right sidebar, look for the Linked stylesheets or similar section.
3. Click Add or Attach a stylesheet.
4. Search for and select the CSS file you created.
5. Confirm and save your template.

Now, any page or blog post based on that template will load the attached stylesheet by default.

Use HubSpot Theme Settings for Global CSS

If you are working with a theme, you can manage styles at the theme level to apply a consistent appearance across multiple assets.

1. In the design manager, locate your theme folder.
2. Open the theme settings file, often defined by a theme.json or similar configuration.
3. In the configuration options, locate the section for styles or stylesheets.
4. Reference your CSS file so it is loaded globally for templates within that theme.
5. Save and publish your theme changes.

Theme-level styling helps you maintain a single source of truth for brand colors, typography, and layout rules across your HubSpot content.

Attach HubSpot CSS to Individual Pages

Sometimes you need page-specific styles that should not affect other content. You can attach CSS files directly to a single page or blog post.

1. Open the page editor for the content you want to style.
2. In the page settings or advanced options, look for Stylesheets or Additional styles.
3. Select Attach a stylesheet.
4. Choose the CSS file designed for this page.
5. Update or publish the page.

This approach is useful for landing pages, campaign-specific microsites, or experimental layouts that require unique styling.

Best Practices for HubSpot CSS Organization

To keep your styling scalable and easy to maintain, follow these organizational guidelines.

Structure Your HubSpot Stylesheets

• Group related rules together, such as header, footer, forms, and blog elements.
• Use comments to label sections in your CSS file.
• Create separate CSS files for major areas of your site when appropriate, such as global, blog, and landing pages.

Manage HubSpot Overrides Safely

• Avoid unnecessary !important declarations to keep styles predictable.
• Test new rules in a staging or test page before applying them sitewide.
• Document custom classes used in templates or modules so other team members know how to reuse them.

Coordinate With HubSpot Modules

• When building custom modules, define CSS class names that clearly indicate their purpose.
• Reference those class names in your stylesheets instead of relying on auto-generated selectors.
• Keep module-specific styles in a dedicated section or file when they are heavily customized.

Troubleshooting HubSpot CSS Issues

If your styles are not appearing as expected, use these checks.

• Confirm the correct stylesheet is attached to your template, theme, or page.
• Clear browser cache and any HubSpot content cache when testing changes.
• Use browser developer tools to inspect elements and see which rules are being applied or overridden.
• Verify that there are no syntax errors in the CSS file, such as missing braces or semicolons.

By systematically checking each layer, you can quickly identify conflicts between multiple stylesheets or inline styles.

Learn More About HubSpot CSS and Design Tools

To dive deeper into the official documentation and detailed options for working with CSS files, review the HubSpot knowledge base article on this topic: Create, edit, and attach CSS files to style your site.

If you want strategic help planning your site structure, SEO, or content implementation around these design tools, you can also explore consulting resources such as Consultevo for additional guidance.

By mastering how CSS files are created, edited, and attached within HubSpot, you gain precise control over your website’s appearance while keeping your design system organized and scalable.

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

“`