# Any solution to creat unique css class name for each module?

**URL:** <https://community.hubspot.com/t/any-solution-to-creat-unique-css-class-name-for-each-module/84018>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [June 23, 2023, 6:48pm UTC](https://community.hubspot.com/t/any-solution-to-creat-unique-css-class-name-for-each-module/84018 "2023-06-23T18:48:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SH82](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@SH82](https://community.hubspot.com/u/SH82)\
**Post date:** [June 23, 2023, 6:48pm UTC](https://community.hubspot.com/t/any-solution-to-creat-unique-css-class-name-for-each-module/84018/1 "2023-06-23T18:48:58Z")

</div>

I would like to creat different css property for different module.

Issue is

i have 2 module,

1st module use css class: h2 { color:red}

2nd module use css class: h2 {color:green}

i dont want to conflict css setting with each module when using both module in same page.

is there any solution for this, except changing class name or adding custom unique class name manually?

---

<div class="post-metadata">

**Author:** ![Mike\_Eastwood](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mike_eastwood/32/70075_2.png) [@Mike\_Eastwood](https://community.hubspot.com/u/Mike_Eastwood)\
**Post date:** [June 23, 2023, 7:55pm UTC](https://community.hubspot.com/t/any-solution-to-creat-unique-css-class-name-for-each-module/84018/2 "2023-06-23T19:55:02Z")

</div>

Hi @SH82

Typically we create a [Custom Module](https://knowledge.hubspot.com/design-manager/create-and-edit-modules), which has a Class Selector, that the content creator can drag and drop into the page.

So you would have Class Selector [red, green, etc.] then in your html:

```lia-code-sample
<div class="{{ module.class_selector }}">
<h2>Heading 2</h2>
</div>

```

Then your CSS sets the colour (super effiecient and fast)

```lia-code-sample
div.red { color: red; }
div.green { color: green; }

```

That way the person using the Custom Module can choose the Class and everything is taken care of in the Module.

Have fun

Mike

---

<div class="post-metadata">

**Author:** ![MBERARD](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mberard/32/61390_2.png) [@MBERARD](https://community.hubspot.com/u/MBERARD)\
**Post date:** [June 26, 2023, 1:57pm UTC](https://community.hubspot.com/t/any-solution-to-creat-unique-css-class-name-for-each-module/84018/3 "2023-06-26T13:57:32Z")

</div>

Hi @SH82

In addition to [@Mike\_Eastwood](https://community.hubspot.com/t5/user/viewprofilepage/user-id/9259) answer, you can you use the **require\_css** block combined with the **scope\_css** to create unique css for your module.

[Here](https://developers.hubspot.com/docs/cms/building-blocks/modules/files#require-css-block) is the hubspot documentation if you want more details about that block.

Have a nice day

Matthieu