> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/how-tos/design-how-tos/how-to-style-a-specific-component-element-e.g.-buttons-image.md).

# 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="/pages/ZuuexCVSzMPUpVlImKbb">/pages/ZuuexCVSzMPUpVlImKbb</a></td><td><a href="/files/Ei5xLIYvM2HQfENwvjNT">/files/Ei5xLIYvM2HQfENwvjNT</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Selecting the whole page</strong></mark></td><td><a href="/pages/sBRDC0WQthUPNLCMqayA">/pages/sBRDC0WQthUPNLCMqayA</a></td><td><a href="/files/B8ljmMBBaQwSF9KhCWjn">/files/B8ljmMBBaQwSF9KhCWjn</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="/pages/WliAot81uLt3ZRntYnOE">/pages/WliAot81uLt3ZRntYnOE</a></td><td><a href="/files/cQ06XGQZXmLIbPKYHE4l">/files/cQ06XGQZXmLIbPKYHE4l</a></td></tr></tbody></table>