There are a few different places where CSS styling can be applied to your HubSpot site. This article will outline where you can find and edit the styles rendering on your HubSpot pages, and provides resources about how to use the developer tools to inspect your web browser. You can learn more about the responsive grid framework of the HubSpot CMS on our designers documentation.
Each browser works a bit differently, so check out the reference documentation for the most commonly used browsers linked below.
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.
CSS on the stylesheet
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 (shown above).
Once you've found the name of the stylesheet, navigate to your design manager (In your HubSpot Marketing Hub Basic, Professional, or Enterprise 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:
There are also some default styles applied to all HubSpot pages outlined in our designer documentation.
Inline Body Styling
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. In HubSpot, you can find this styling in the design manager in the Styling Options for that module in the inspector. If the module itself is custom coded, you can check the CSS editor of the module to find its styling.
CSS on the page
If the page URL appears next to the declaration, we know the CSS is within <style> tags on the page. There are a few places you may need to check to find the exact styling that needs to be changed.
The styling may be applied to the
- Site header HTML or site footer HTML in the page settings or the domain defaults.
- Site header HTML or site footer HTML applied to the template in the design manager.
- In a module on the page or template.
CSS from the browser
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 can be overwritten in the stylesheet applied to your page.
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.