# How to style a specific component element (E.g. buttons image)

{% embed url="<https://app.arcade.software/share/Hvh8XxhrHb2787ycUXFg>" %}

### Styling a sub-element:

1. In the "**Edit**" sub-menu, open the "**Designer**" card and then select a component from your page.
2. Click on "**+ Sub-Elements**" to get the selected component's sub-elements list.
3. From the "**Elements**" dropdown menu select the specific part of the component you want to add styles to. E.g. buttons checkbox.
4. Add your styles.

### Applying styles to a specific button in an Options Selector:

1. In the "**Edit**" sub-menu, open the "**Designer**" card and then select a component from your page.
2. Click on "**+ Sub-Elements**" to get the selected component's sub-elements list.
3. Click on "**+ By Button**" and select the button key of the one you want to style.
4. Add your styles.

### &#x20;Applying styles on a specific component state (hover, selected, etc):

1. In the "**Edit**" sub-menu, open the "**Designer**" card and then select a component from your page.
2. Click on "**+ Filter**".
3. From the "**When**" dropdown menu, **select the state** you want to apply styles to. These options are going to be different depending on the kind of component you have selected.
4. Add your styles.

### Limiting the tag's reach:

{% hint style="info" %}
**Tags** in out builder work like **CSS classes**. As you know, if you add styles to a tag, every component that has that tag would then get that styling. Here you'll learn how to limit a tag's reach.
{% endhint %}

1. In the "**Edit**" sub-menu, open the "**Designer**" card and then select a component from your page.
2. Click on "**+ Filter**".
3. From the "**In**" dropdown menu, you can choose to limit to components with this tag but only on **this page**, or components with this tag but only on **pages with a specific tag**.
4. Add your styling.

### Related docs:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>How to style individual buttons (by button key) in Options Selectors</strong></mark></td><td><a href="how-to-style-individual-buttons-by-button-key-in-options-selectors">how-to-style-individual-buttons-by-button-key-in-options-selectors</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fip5BXyZuu8OCHO6joPFs%2F2023-03-07_10h01_54.png?alt=media&#x26;token=2b858a72-7485-4da6-825c-f3002cf57c7f">2023-03-07_10h01_54.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Selecting the whole page</strong></mark></td><td><a href="../general-how-tos/how-to-select-the-whole-page">how-to-select-the-whole-page</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F089AOuRQi3nUPaHBPt36%2F2023-03-07_12h01_29.png?alt=media&#x26;token=ad3a978f-5311-4883-b6f7-785686e706a2">2023-03-07_12h01_29.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Styling CSS properties that are not there in the designer card (custom properties)</strong></mark></td><td><a href="how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties">how-to-style-css-properties-that-are-not-there-in-the-designer-card-custom-properties</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fxns1t1b9iwf5LJDeILKK%2F2023-03-07_11h57_53.png?alt=media&#x26;token=581963b5-2e2a-413c-9717-77db7b149484">2023-03-07_11h57_53.png</a></td></tr></tbody></table>