# Global CSS in Clean Pro **URL:** \ **Category:** CMS Development\ **Tags:** css\ **Created:** [November 13, 2025, 5:42pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602 "2025-11-13T17:42:14Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![SD352](https://avatars.discourse-cdn.com/v4/letter/s/c0e974/32.png) [@SD352](https://community.hubspot.com/u/SD352)\ **Post date:** [November 13, 2025, 5:42pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/1 "2025-11-13T17:42:14Z")
I use Clean Pro in HubSpot. I am trying to add the below CSS globally to my website. - The **goal** (adding text-shadow to the Hero H1). - The **working CSS snippet** I am trying to use: - The link to my **stylesheet** and the **page URL** where I am testing. > **[Edit Page | HubSpot](https://app.hubspot.com/pages/6824522/editor/199666992807/content)** > **[Edit Page | HubSpot](https://app.hubspot.com/pages/6824522/editor/194709021808/content)** - My **observation** is that the class is applied, but the style isn’t showing. Any help would be much appreciated. Thanks, Sam ---
**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\ **Post date:** [November 13, 2025, 6:26pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/2 "2025-11-13T18:26:42Z")
Hi @SD352, We can’t view those links, only someone logged into your portal can. Please link to a live page and tell us the name of the css file you’re adding your code to. * * * ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg) **Barry Grennan** [Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity) [Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan) ---
**Author:** ![SD352](https://avatars.discourse-cdn.com/v4/letter/s/c0e974/32.png) [@SD352](https://community.hubspot.com/u/SD352)\ **Post date:** [November 13, 2025, 6:38pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/3 "2025-11-13T18:38:07Z")
My website isn’t live yet. 😞 ---
**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\ **Post date:** [November 13, 2025, 6:54pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/4 "2025-11-13T18:54:10Z")
@SD352 a preview link should be visible to outsiders too. On your edit page click preview and then preview in new window and copy the preview URL from the address bar there on the full page preview. * * * ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg) **Barry Grennan** [Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity) [Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan) ---
**Author:** ![SD352](https://avatars.discourse-cdn.com/v4/letter/s/c0e974/32.png) [@SD352](https://community.hubspot.com/u/SD352)\ **Post date:** [November 13, 2025, 7:02pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/5 "2025-11-13T19:02:45Z")
Sorry, I know little to nothing about coding and CSS. Is this the CSS file? hero-title--shadow [http://metroymcas-org.sandbox.hs-sites.com/wey?hs\_preview=QQZYUnUH-194709021808](http://metroymcas-org.sandbox.hs-sites.com/wey?hs_preview=QQZYUnUH-194709021808) ---
**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\ **Post date:** [November 14, 2025, 3:55pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/6 "2025-11-14T15:55:54Z")
Thank you @Anton @BarryGrennan for stepping in and sharing your expertise! — Jaycee ---
**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\ **Post date:** [November 14, 2025, 7:10am UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/7 "2025-11-14T07:10:35Z")
Hey @SD352, don’t really know how Clean Pro is set up, but CSS works “from top-to-bottom”. This means: - if your theme got a main.css (which I assume it has), this will be loaded first - if your theme got a theme-overrides.css (or similar naming), it will be loaded after the main.css - if your theme got a module specific MODULE\_NAME.css in the css folder, it may either be loaded in the main.css, individually via the corresponding module or is linked in the module sidebar, this will be loaded after them theme-overrides.css - if your theme got CSS in the module.css (when opening the module in the Design manager) this will be loaded in the {{ standard\_header\_includes }} tag - if your module got inline styles, they will most times override everything as they’re closest to the actual element. Therefore, try finding the right place to put the code into, or - if it’s a theme module - put the css as inline styling into it (not recommended if you’re not familiar with the theme setup). It would look like this: ```lia-code-sample

...

``` Something else you can try (but shouldn’t really use) is something I call the sledgehammer method. ```lia-code-sample .hero-title--shadow h1 { text-shadow: 0 3px 8px rgba(0,0,0,.5) !important; } ``` _!important_ tells the browser that regardless what came before or after, this element should overwrite them all. The biggest problem with using it is, that you might end up in an endless loop over putting !important everywhere and confusing the browser, and therefore negatively impacting page performance best, Anton ---
**Author:** ![amjadkhatri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amjadkhatri/32/79746_2.png) [@amjadkhatri](https://community.hubspot.com/u/amjadkhatri)\ **Post date:** [November 18, 2025, 6:15am UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/8 "2025-11-18T06:15:57Z")
Hey @SD352, the simplest fix is to add !important to your CSS (as Anton suggested). In Clean Pro, go to Design Manager → find “theme-overrides.css” or your main CSS file → add this: .hero-title--shadow h1 { text-shadow: 0 3px 8px rgba(0,0,0,.5) !important; } This forces the style to override any conflicting CSS. If you’re still stuck, share a preview link (click Preview → copy URL from address bar) so we can see what’s blocking it. * * * **Did my answer help? Please click “Mark as solution” — it helps others and means a lot to me!** I use my real experience, community knowledge, and expert tools (including AI when needed) to give the most accurate and human responses. | ![]() | **Muhammad Amjad** Senior Consultant • HubSpot + Web Automation Expert**[Need HubSpot Help? Send Me a DM ](https://www.upwork.com/freelancers/amjadkhatri)** **![]()[Connect with me On LinkedIn](https://linkedin.com/in/amjadkhatri) Specialties:** - HubSpot CRM Setup & Automation - Custom Workflows & Email Marketing - API Integrations & Webhooks - WordPress + Laravel Development | Available for consulting, troubleshooting & custom HubSpot solutions. ---
**Author:** ![SD352](https://avatars.discourse-cdn.com/v4/letter/s/c0e974/32.png) [@SD352](https://community.hubspot.com/u/SD352)\ **Post date:** [November 18, 2025, 3:06pm UTC](https://community.hubspot.com/t/global-css-in-clean-pro/142602/9 "2025-11-18T15:06:44Z")
Thank you all!