There are a few different places where CSS styling can live within HubSpot. If you're viewing your live page and are unsure of where styling for a specific element can be edited, right-click on the page and select Inspect or Inspect element to see the CSS declarations that are being applied to elements of your page.
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. You can find HubSpot partners who can help with website design here.
Below you'll find information about the different places CSS can be applied within HubSpot. You can use this information to determine where the styling for an element on your page is coming from, based on what appears in the Style panel of your browser's inspector as shown in the screenshot above.
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). Please note that you will see .min in the CSS file name if the stylesheet has been minified, which is a process to compress the file and remove unnecessary spaces. HubSpot stylesheets are minified automatically to help reduce page load time. This is not a part of the stylesheet name within HubSpot so, in the example here, the stylesheet in your HubSpot account is vast-style.css.
Once you've found the name of the stylesheet, navigate to the Design Manager in HubSpot (Content > Design Manager) to find your stylesheet and make edits as needed.If you're seeing the name of your stylesheet in the inspector, but can't seem to find the styling in question within the stylesheet, there are a few possible explanations:
- The stylesheet has unpublished changes. Some styling may have already been removed from or edited in the CSS file but the changes weren't published, so it doesn't appear in the stylesheet as it appears on the live page. Publish the file or look at the revision history to confirm this.
- The CSS is being pulled into the stylesheet from another coded file. This is indicated by includes, as shown here:
If the included files are HubSpot default stylesheets (layout.css, theme-foundation-v1-0.css, hubtheme-modules.css, recommended.css, etc.) you will not be able to edit them, but you can overwrite the CSS in them by adding CSS with the same selectors below the includes in the main stylesheet.
Layout.css (formerly known as required_base.css) is the file that is responsible for styling HubSpot's responsive grid and is always automatically included in any drag-and-drop template. It is not included by default in custom coded templates. In addition to the responsive grid CSS, the file includes some classes that can be used to show and hide elements at different viewports. You can view the file here. Other files automatically included by HubSpot can be found here.
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 either in the source code of the module (e.g. style="color: #ff00ff") within the page editor or set in the Custom Inline Styles field of a module on the template.
Navigate to the editor by clicking the HubSpot icon in the top right corner of the live page and selecting Edit Page, then access the source code for the module where the element in question appears to review and edit any styling applied in the HTML as needed.
If the styling in question does not appear in the source code of the module at the page-level, click the Settings tab at the top of the page editor, then scroll down and click Edit template. Find the module in which the element appears, click the gear icon to the right, and select Edit CSS Declarations. Review and edit the Custom Inline Styles field as needed.
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:
- Head or Footer HTML of the page: within the page editor, click Settings, then scroll to Page Settings and click Edit head HTML and/or Edit footer HTML.
- Head or Footer HTML of the template: within the page template, click the Edit dropdown menu, then Edit head. Review and make changes as needed to the Additional HTML Head Markup for this Layout field. If you have a custom HTML module in your footer on the template, locate the module and click Edit HTML to review and make changes as needed.
- Head or Footer HTML of domain or default for all domains: navigate to Content > Content Settings. On the Page publishing screen, scroll down to the Site Header HTML and Site Footer HTML boxes to see if the styling you're looking for appears here. You can also check the specific domain on which the page lives to see if styling was added here for just that domain by changing the domain in the Select a Domain to Edit dropdown menu at the top of the page.
- In a module on the page/template (usually Custom HTML): navigate to the page template to see if you have any coded modules that may contain styling for the element in question. Click Edit HTML on the module to review and make changes as needed.
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.