> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/v1/usage/stylingverview/custom-css.md).

# Custom CSS

You can apply custom CSS styles on a per-site basis

{% hint style="info" %}
Site wide CSS is configured via the **Appearance > CSS** tab of the [site editor](/v1/reference/site-settings.md).
{% endhint %}

All elements within a form schema can have a styleClasses key that can take a string of space separated CSS classes. The below example adds the class `my-red-box` to an input element.

```yaml
{
  "inputType": "text",
  "label": "My Input",
  "model": "field1",
  "styleClasses": "col-md-3 my-red-box",
  "type": "input"
}
```

This class is defined in the CSS section of the Site / Appearance as follows:

```css
.my-red-box {
    border-width: 2px;
    border-color: red;
    border-style: solid;
    padding: 20px;
}
```

### Page scoped classes

To target specific forms in your app, you can add a `styleClasses` key. This will allow you to still keep your CSS in a single location and theme pages separately.

![Only this Dashboard page with have the \`dash-red\` class applied.](https://1058258721-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LKI28WjQukQ2x6JNpYA-4045043681%2Fuploads%2Fgit-blob-b075f850acee9ca8ef41e89f003c39eda7614220%2FScreen%20Shot%202018-07-06%20at%201.11.03%20PM.png?alt=media)

Resulting is something similar to the following:

![](https://1058258721-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LKI28WjQukQ2x6JNpYA-4045043681%2Fuploads%2Fgit-blob-4e3cd5e97ad6972f1ffd1a78e6a2355847961cd3%2Fimage.png?alt=media)