# How to style components (basics) {% embed url="" %} 1. In the "**Edit"** sub-menu, click the brush icon to open up the "**Designer**" card. 2. Select the component you want to style. {% hint style="warning" %} To style a component it should always have a tag. {% endhint %} 3. If the component doesn’t yet have a tag: \ a. Click on “**Add a Tag**” and write a tag name in the “**Add a tag to this component**” input.\ b. Search for an existent tag and select it, or press "Enter" to create a new one. 4. **Select** the property you want to set. **CSS properties** are grouped by categories in a couple tags (Size, Spacing, Position, etc...). 5. **Set a value** for the desired property. 6. When you feel you have finished styling your component, click the “Done” button to close the card. ### Related Docs:
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-properties2023-03-07_11h00_35.png
Styling hover, selected, disabled button stateshow-to-style-hover-selected-disabled-button-states2023-03-07_11h04_14.png
How to style a specific component element (E.g. buttons image)how-to-style-a-specific-component-element-e.g.-buttons-image2023-03-07_11h05_39.png