> 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-components-basics.md).

# How to style components (basics)

{% embed url="<https://firebasestorage.googleapis.com/v0/b/savvy-flow-uploads/o/oNrQLV6ZiVBavUmAkfcu%2FHow%20to%20style%20a%20component_660843411712384.mp4?alt=media&token=f20d98a0-ac9c-4ad4-baad-76c1dced05a8>" %}

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:

<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>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/Sm03e4PSt1cXs6J12aQ5">/files/Sm03e4PSt1cXs6J12aQ5</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Styling hover, selected, disabled button states</strong></mark></td><td><a href="/pages/pdtmv7gpYTVzTCyec24s">/pages/pdtmv7gpYTVzTCyec24s</a></td><td><a href="/files/EP9szns2vLGplyqGxl4E">/files/EP9szns2vLGplyqGxl4E</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>How to style a specific component element (E.g. buttons image)</strong></mark></td><td><a href="/pages/6kzWKAJU3ZHqdnd4z1Kp">/pages/6kzWKAJU3ZHqdnd4z1Kp</a></td><td><a href="/files/m1hRouJNik3OdDjZ8EjB">/files/m1hRouJNik3OdDjZ8EjB</a></td></tr></tbody></table>