# Prevent custom module CSS from being affected by theme CSS and other module CSS

**URL:** <https://community.hubspot.com/t/prevent-custom-module-css-from-being-affected-by-theme-css-and-other-module-css/106604>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [May 7, 2024, 9:40am UTC](https://community.hubspot.com/t/prevent-custom-module-css-from-being-affected-by-theme-css-and-other-module-css/106604 "2024-05-07T09:40:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dtg001](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dtg001](https://community.hubspot.com/u/dtg001)\
**Post date:** [May 7, 2024, 9:40am UTC](https://community.hubspot.com/t/prevent-custom-module-css-from-being-affected-by-theme-css-and-other-module-css/106604/1 "2024-05-07T09:40:06Z")

</div>

Hi all I’m new to hubspot and really need your help to figure out my styling problem in a template. Thanks!

It goes like this :

1. I created 2 custom module.

- module.html (Only html)
- module.css (This is where I put my styling)
- module.js (No script)

2. I created a template by copying the About.html of Hubspot with it’s theme.

3. In the new theme I inserted the 2 custom modules. Here I can see that the Hubspot theme destroyed the styling of the custom modules.

My question is

1. How do I restrict a module styling from being affected by other modules or by the theme styling.

2. In the template, I would still like to use the Hubspot theme for some dnd areas in the template but not affect the styling of my custom module.

Template Code:

`<!-- templateType: page isAvailableForNewContent: true label: Template 1--><!doctype html><html> <head> <meta charset="utf-8"> {% if page_meta.html_title or pageTitle %}<title>{{ page_meta.html_title or pageTitle }}</title>{% endif %} {% if brand_settings.primaryFavicon.src %}<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />{% endif %} <meta name="description" content="{{ page_meta.meta_description }}"> {{ require_css(get_asset_url("../css/main.css")) }} {# This is intended to be used if a template requires template specific style sheets #} {% if template_css %} {{ require_css(get_asset_url(template_css)) }} {% endif %} {{ require_css(get_asset_url("../../css/theme-overrides.css")) }} {# To see a full list of what is included via standard_header_includes please reference this article: https://developers.hubspot.com/docs/cms/hubl/variables#required-page-template-variables #} {{ standard_header_includes }} </head> <body> {# Custom Header Module #} {% module "module_17149704516893" path="/custom/modules/custom-header", label="custom-header" %} {# #} {% dnd_area "dnd_area" label="Main section", class="body-container body-container--template-1" %} {% end_dnd_area %} {# #} {# Custom Footer Module #} {% module "module_166514144150" path="/custom/modules/custom-footer", label="custom-footer" %} {{ standard_footer_includes }} </body></html>`

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [May 7, 2024, 12:46pm UTC](https://community.hubspot.com/t/prevent-custom-module-css-from-being-affected-by-theme-css-and-other-module-css/106604/2 "2024-05-07T12:46:05Z")

</div>

Hi @dtg001

So the first thing you need to do is move your styles inside a \<style\> tag in module.html and wrap that in {% scope\_css %} this will prevent your custom module styles from being affected. You can go through this doc to learn more about custom modules. [CLICK HERE](https://developers.hubspot.com/docs/cms/building-blocks/modules/files#:~:text=You%20can%20also,HubL)

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!