Understand the source of a page's styling

There are multiple places where content styling can be added in HubSpot, and it is applied in a specific order based on where it's added. In this article, learn how styling is applied, how to find styling on a live page, and how to get help with design edits.

Understand how styles are applied

Styles are applied in a specific order based on where they're added in HubSpot. For example, styles added in a global stylesheet are overridden by styles added on a specific page. 

Use this list to understand the source of a page's styling, starting with styles applied first and ending with styles applied last.

1. Custom module CSS
   • Stylesheets attached to a module in the layout editor.

• • CSS added to the module.css section of a module in the module editor.

1. • CSS inside the HubL markup of the module within a require_css block.
2. Stylesheets added to a template through the require_css block in the code editor.
3. HubSpot default stylesheets (e.g., layout.css) in the design manager.
4. Stylesheets attached to the template in the layout editor.

5. Stylesheets attached on the settings tab of your page.

6. Stylesheets attached in your settings for all domains
7. Stylesheets attached in your settings for a specific domain
8. CSS added within <style> tags. For example, the head HTML of your website settings, page settings, or template.

9. Styles added through the page editor. HubSpot will also add !important tags to these styles. Learn more about !important tags and how they affect styling.

Find styling on a preview or live page

Use developer tools in your browser to find the styles applied to your live website or a preview page. Each browser varies slightly in how to troubleshoot styling. In the following example, Google Chrome is used.

1. Navigate to your content:
   • In your HubSpot account, navigate to Content > Website Pages.
   • In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your page.
3. In the content editor, click Preview in the top right.
4. On the preview page, click Open in a new tab.
5. In the preview, right-click on the element that you want to examine, then select Inspect.
6. In the Elements pane, you'll see the HTML of the page. Click on the elements to view their styles.
7. In the Styles pane, review the CSS rules applied to that element. Select and clear the checkboxes next to each style to temporarily remove or add styles. This will help to identify which rule is affecting the element.

8. To the right of the CSS rules, you'll see the source name for that styling. This confirms where the source of the styling is located. Hover over the source name to view the full name:
   • If the styling is coming from a CSS file, the name of the stylesheet will appear next to the CSS declaration. Navigate to the design manager, find the stylesheet, and make edits as needed.

• • If the source name starts with module, then the styling is from the CSS of a module. Hover over the source name to view the full name of the module.

• • If the source name is User agent stylesheet , the styling is part of the browser’s default styling.
    • Generally, you'll see this for HTML tag styling (e.g., <p>, <h1>, <span> etc.), when the browser is unable to find styling rules for the element. 
    • User agent stylesheet can be overridden by adding your own styles to that element.

• • If the source name is the page URL, the styling is from <style> tags on the page. For example, the styling could be set in the page or template head HTML.

• • If the source name is the page URL and the styling is targeted at #hs_cos_wrapper_module_number, the styling is added in the Styles tab of the page editor. HubSpot will add !important tags to these styles. Learn more about !important tags and how they affect styling.

• • If the source name is <style>, the styling is automatically included with the element. Often, this is because styling in the editor of an embeddable HubSpot asset, such as a CTA or meeting widget.

• • If element.style appears next to the declaration in the inspector, the CSS has been set inline. Inline styling is styling added directly to the HTML source code of a page, or the Inline styling fields of a template. For example, inline styling in source code would appear as <p style="background:purple;">Hello world</p>.

For more details on how to inspect a page, review the help documentation for your web browser:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Get help with design edits

The best resource for making changes to your HubSpot templates or stylesheets is the original template designer. However, there are a variety of resources to get additional help with content styling, depending on your comfort level with troubleshooting HTML and CSS.

• If you're comfortable using the inspector tools to troubleshoot design issues on your template:

• • Search and post on the CMS Development Forum on the Community to get tips, advice, or troubleshooting your code.
  • Refer to the CMS reference documentation for tutorials, guides, and an overview of the CMS framework.
  • Connect with HubSpot's product team and other developers working in HubSpot on the CMS Developer Community Slack.

• If you aren't comfortable reading or editing HTML and CSS in your templates:

• • Connect with a certified HubSpot Partner with website design expertise to help you customize your templates.
  • Use a theme template to edit page styles without writing any code.
  • If you're using a template purchased from the Asset Marketplace, contact the template's designer for questions about the design of your page.