# Styling the element inside a HTML element

**URL:** <https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840>\
**Category:** How do I?\
**Created:** [October 11, 2023, 1:03pm UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840 "2023-10-11T13:03:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vwasteels](https://avatars.discourse-cdn.com/v4/letter/v/4491bb/32.png) [@vwasteels](https://community.weweb.io/u/vwasteels)\
**Post date:** [October 11, 2023, 1:03pm UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/1 "2023-10-11T13:03:06Z")

</div>

Hello,

I need to style HTML content inside a WeWeb HTML element.

The HTML content comes from a WYSIWYG through an API and I need to style its content.

Any idea ?

Thanks

---

<div class="post-metadata">

**Author:** ![Marc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/marc/32/30_2.png) [@Marc](https://community.weweb.io/u/Marc)\
**Post date:** [October 11, 2023, 3:33pm UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/2 "2023-10-11T15:33:05Z")

</div>

Hi,  
you could try to add another HTML element containing the style, in the format :

```auto
<style>
.my-class {
   color: red;
}
</style>

```

If I understand your issue correctly, this should be a good solution.

---

<div class="post-metadata">

**Author:** ![vwasteels](https://avatars.discourse-cdn.com/v4/letter/v/4491bb/32.png) [@vwasteels](https://community.weweb.io/u/vwasteels)\
**Post date:** [October 11, 2023, 4:35pm UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/3 "2023-10-11T16:35:01Z")

</div>

Hey,

Thanks for your answer !

It is not exactly what I am looking for.

Attached is an example of the situation, first the rendered content, then the HTML element settings. For example, I need to change the color of the text marked as strong.

Thanks again !!

![Capture d’écran 2023-10-11 à 18.32.11](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f1cb1c49afa0109be4c3f12c49da06a73b569cd3.jpeg)

 ![Capture d’écran 2023-10-11 à 18.32.27](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1dd0fc357c2ca1e90b72434f7b2af0b5657aa2be.jpeg)

---

<div class="post-metadata">

**Author:** ![Marc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/marc/32/30_2.png) [@Marc](https://community.weweb.io/u/Marc)\
**Post date:** [October 11, 2023, 7:45pm UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/4 "2023-10-11T19:45:27Z")

</div>

You can add an id to your HTML element (in the settings tab of the element) and create a second HTML element with this css :

```auto
<style>
   #my-element-id strong {
       color: green;
   }
</style>

```

---

<div class="post-metadata">

**Author:** ![vwasteels](https://avatars.discourse-cdn.com/v4/letter/v/4491bb/32.png) [@vwasteels](https://community.weweb.io/u/vwasteels)\
**Post date:** [October 12, 2023, 7:13am UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/5 "2023-10-12T07:13:55Z")

</div>

This works fines !

Do you know if I can use a color from the design system ? maybe a as a CSS variable ?

Thanks

---

<div class="post-metadata">

**Author:** ![Marc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/marc/32/30_2.png) [@Marc](https://community.weweb.io/u/Marc)\
**Post date:** [October 12, 2023, 7:41am UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/6 "2023-10-12T07:41:34Z")

</div>

You can but it’s a bit of a hack.

- First you need to get the ID of the color in the design system.  
This ID isn’t displayed anywhere in WeWeb.  
To get it you need to open some binding, go to Javascript and select the color. You will see some ID that you need to copy  

- Then you need to use the color in your CSS :

```auto
<style>
    #my-id strong{ 
        color: var(--10805bf0-d64b-4c3b-a1db-0722db3db56e); 
    }
</style>

```

Keep in mind that this a hack and that we might change the way the colors work internally in the futur. It is not planed for now and we might also never change it.

We could also add a way to get the css value of the color directly from the color panel itself.

---

<div class="post-metadata">

**Author:** ![vwasteels](https://avatars.discourse-cdn.com/v4/letter/v/4491bb/32.png) [@vwasteels](https://community.weweb.io/u/vwasteels)\
**Post date:** [October 12, 2023, 8:23am UTC](https://community.weweb.io/t/styling-the-element-inside-a-html-element/4840/7 "2023-10-12T08:23:36Z")

</div>

Ok, thanks for the detailed answer !!