Landing Pages
Blog
Design Manager

Understand where the styling on your page is coming from

Last updated: September 2, 2020

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

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. Below, learn how styling is applied, how to find styling on a live page, and how to get help with design edits.

Understand how styling is applied

CSS styling in HubSpot is applied in order based on where it's set in HubSpot, as listed below. For example, styling set in a global stylesheet is overridden by styling set on a specific page. 

  1. Custom module CSS
    1. Stylesheets attached to a module.
    2. CSS added to the CSS section of a module.
    3. CSS inside the HubL markup of the module within a require_css block
  2. Stylesheets added to a template through the require_css block
  3. HubSpot default stylesheets (for example, layout.css)
  4. Stylesheets attached to the template

    design-manager-linked-stylesheet
  5. Stylesheets attached on the settings tab of your page

    page-editor-attach-stylesheet
  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.

    page-editor-head-html
  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.

page-editor-styles-tab

Find styling on a preview or live page

You can use developer tools in your browser to examine the styles applied to your live website or a preview page. Each browser varies slightly in how to troubleshoot styling.

To find styling in Google Chrome:

  • On your preview or live page, right-click on the element that you want to examine, then select Inspect.
  • In the Elements pane on the left, you'll see the HTML of the page. You can either click on the elements to view their styles, or you can use the cursor icon in the top left of the pane to click on-page elements.

    inspect-live-page-cursor

  • In the Styles pane on the right, you'll see all of the styles that are applied to that element. You can select and clear the checkboxes next to each style to remove and apply the style. This will help to narrow down which style rule to change.

    inspect-live-page
  • To the right of the CSS rules, you'll see the source name for that styling, which tells you where the styling is coming from. Hover over the source name to view the full name:
    • When the styling is coming from a stylesheet, the name of the stylesheet will appear next to the CSS declaration in the inspector. You can then navigate to your design manager, find the stylesheet, and make edits as needed.

      inspect-css-stylesheet-name
    • If the source name starts with module, then the styling is likely coming from the CSS of a module. Hover over the source name to view the full name of the module.

      inspect-css-module-name
    • If the source name is User agent stylesheet , the CSS is part of the browser’s default styling. You'll see this most often for general HTML tag styling like <p>, <h1>, <h2>, <span>, <div>, etc. This styling is applied when the browser can't find general styling rules for the element, but it can be overwritten by adding your own styles to that element.

      inspect-css-user-agent
    • If the source name is the page URL, the CSS is coming from within <style> tags on the page. For example, the styling could be set in the page or template head HTML.

      inspect-css-page-url
    • If the source name is the page URL and the styling is targeted at #hs_cos_wrapper_module_number, the styling is likely being set 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.
       

      inspect-css-styles-tab
    • 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>.

      inspect-css-element-style

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

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:
  • If you aren't comfortable reading or editing HTML and CSS in your templates:
/cos-general/how-can-i-determine-where-the-styling-on-my-page-is-coming-from