# Custom CSS

{% 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.](/files/-LKI587h22Js49_o1PHL)

Resulting is something similar to the following:

![](/files/-LWvaiO5sTTQKAxkQqph)


---

# 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.klai.studio/v1/usage/stylingverview/custom-css.md?ask=<question>
```

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.