# How to style a specific component element (E.g. buttons image) {% embed url="" %} ### 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. ### 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:


How to style individual buttons (by button key) in Options Selectors	how-to-style-individual-buttons-by-button-key-in-options-selectors	2023-03-07_10h01_54.png
Selecting the whole page	how-to-select-the-whole-page	2023-03-07_12h01_29.png
Styling 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	2023-03-07_11h57_53.png

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.trysavvy.com/how-tos/design-how-tos/how-to-style-a-specific-component-element-e.g.-buttons-image.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.