> For the complete documentation index, see [llms.txt](https://creatorlabs.gitbook.io/boltui-docs-preview/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creatorlabs.gitbook.io/boltui-docs-preview/understanding-bolt/styles.md).

# Styles

Beautify your apps

Styling is very imporant for any app that has some sort of user interface, and same applies for Bolt. Till now, we learnt how we can add properties and events to a component, so using that principle, we can add styles to our component as well.

### Inline styles

In HTML, we can add inline styling using the `style` attribute. Since we can add attributes in our BoltUI as well, we can just as well add them inline like this:

```javascript
attribute(
    p("This text is red"),
    {
        style: "color: red"
    }
)
```

But this is just a hectic way of styling, which also does not provides you with a lot of options

### Styles from css files

You can directly import stylesheets from your source directory and use them in your UI by selecting ids and classes in your css file. Let's see the above example

{% code title="main.js" %}

```javascript
import "./style.css"
id(p("I am in red color"), "red")
```

{% endcode %}

{% code title="style.css" %}

```css
#red {
    color: red;
}
```

{% endcode %}

### Styling using SCSS

Since bolt usess vite for development, we will need to look at the guidebook of vite to add SCSS support directly into vite, then we can just import the scss file as we did for our css file.