There are different places where styling may be applied to your HubSpot content. Where the CSS (Cascading Style Sheets) is added in HubSpot will impact the order in which it's applied. CSS cascades, meaning that the last styles applied will override whatever came before. As a general rule, more specific styling takes priority. This means that CSS applied to a specific page or module will take priority over what's set on a template or applied to your domain in your settings.
This article will cover how CSS styling is applied to your HubSpot content, and how to use the developer tools in your web browser to locate this styling.
Please note: if you are not comfortable reading or editing CSS, it is highly recommended that you work with a designer to make edits to your website's styling.
Styling may be applied to your content in a few different locations in HubSpot. CSS will cascade in descending order, with the last styles applied taking priority.
Please note: the last styling applied to your content will take priority over styles set earlier in the CSS. Styling can also be overridden by a more specific declaration, or an !important tag.
Styling will be applied to your HubSpot pages or blog posts in the following order, with the last style applied taking priority:
Styling from a stylesheet is the first CSS applied to your page or blog post. Any styling applied in the page editor will take priority over the template which will take precedence over stylesheets attached in your settings.
CSS will be applied in this order, with the last style applied taking priority:
- A stylesheet attached in your settings for all domains.
- A stylesheet attached in your settings for a specific domain.
- A stylesheet attached to your page or blog post template.
- A stylesheet applied in the settings tab of your page.
- There are also some default styles applied to all HubSpot pages.
If CSS is coming from a stylesheet, the name of the stylesheet will appear next to the CSS declaration in the inspector. If you hover your mouse over the stylesheet name you can see the entire file name.
Once you've found the name of the stylesheet, navigate to your design manager (In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.) to find your stylesheet and make edits as needed.
If you're seeing the name of your stylesheet in the inspector, the CSS may be getting pulled into the stylesheet from another coded file. This is indicated by includes, as shown here:
CSS added to the <style> tag may be applied in any of the following locations, with the last style applied taking priority:
- Site header HTML or site footer HTML added in your settings for all domains.
- Site header HTML or site footer HTML added in your settings for a specific domain.
- Site header HTML or site footer HTML applied in the settings tab of your page.
- Site header HTML or Site footer HTML applied to your template in the design manager.
- Inline styling added to a module in the template.
- Inline styling added to a module in the content editor.
If the page URL appears next to the declaration, we know the CSS is within <style> tags on the page. If element.style appears next to the declaration in the inspector, the CSS has been set inline.
This means that the CSS is not coming from a stylesheet or within <style> tags in the head or footer of your page, but rather it has been set within the module itself.
If you see User agent stylesheet next to the declaration, the CSS is part of the browser’s default styling. You will see this most often for broader HTML tag styling like <p>, <h1>, <h2>, <span>, <div>, etc.
This styling is applied last and takes priority over your attached stylesheets and CSS added in a <style> tag, but it can be overwritten in the stylesheet applied to your page with a more specific declaration.
You can use web browser developer tools to examine the styles applied to your live site. If you're using another type of browser, search their help documentation for reference materials about how to inspect the webpage elements.
Below is a link to resources about using developer tools on the most commonly used web browsers:
If you're using another type of web browser, check out their user documentation for more details about how to inspect the elements of the page.