# CSS & Advanced Styling

### Local styling for questions, steps, groups

While the **Theme** tab controls the overall appearance of your flow, Formsort also supports **local styling** at the level of individual questions, steps, and groups. These local overrides allow you to tailor the look and feel of specific parts of your flow—without affecting the rest of the variant.

### Group style overrides

At the **group** level, you can override the default theme styling for all content within that group:

1. Select a group in the Studio.
2. Click **Style**.
3. Click **Override the style of this group**.

Any changes made here will apply only to that specific group. If you notice styling inconsistencies with what’s defined in your Theme, this is a good place to check first.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FUMjWsH8AXQkb1XTwqP7Q%2Fimage.png?alt=media&#x26;token=1679258f-bfda-411e-bd3c-c535744ce1aa" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
💡 Remember: Group overrides take precedence over base Theme styles.
{% endhint %}

***

### Step styling

Individual **steps** also support style customization. From the **Style** tab of a selected step, you can:

* Add a **background image**
* Change the **step transition animation**
* Modify the appearance of the **Next** button

These settings are useful for visually differentiating specific parts of a flow. For a full list of options, see the [Step styling](https://docs.formsort.com/css-and-advanced-styling/step-style) sub-section.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FaYLqT6iHtsFW04UwDBRl%2Fimage.png?alt=media&#x26;token=356f5891-644a-4490-b0a4-cb8985e4a1b6" alt=""><figcaption></figcaption></figure></div>

***

### Question styling

Questions have more limited support for local styling, but certain components allow overrides of the default Theme appearance. If the question supports it, you’ll see a toggle labeled **Override default style**.

As of this writing, the following components support local style overrides:

* **Short text** and **Long text** questions
* **Button-style select questions**, including:
  * Single choice
  * Multiple choice
  * Picture choice

Once enabled, you’ll see options to customize both the **component itself** and the **container** it’s rendered in.

<figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FjdaG53g5U799QfqCt4QN%2Fimage.png?alt=media&#x26;token=2a9fc1ac-e3c7-4b87-a601-9de868fc5c6d" alt=""><figcaption></figcaption></figure>

### Question Containers

Every question is rendered inside a **container**, and you can control the appearance of that container using the **content container style** setting in the question’s **Style** tab.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FZ3kg0JIqpEaVyHqZypCh%2Fimage.png?alt=media&#x26;token=3bfde70a-1c72-434f-939d-ded000a8603c" alt="" width="563"><figcaption></figcaption></figure></div>

To define or edit custom containers:

1. Go to **Theme → Containers**.
2. Use **+ Add question style** to create new container styles or modify existing ones.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FDhHIdincGloCOPI2cuJC%2Fimage.png?alt=media&#x26;token=b00e3f38-8808-4267-afc6-bb1b29208e78" alt="" width="563"><figcaption></figcaption></figure></div>

***

### Advanced styling with CSS

For greater flexibility, you can also use **Custom CSS** to style components that don’t expose all properties via the UI. This is especially useful for advanced use cases where question-level overrides are not available.

See our [Custom CSS](https://docs.formsort.com/css-and-advanced-styling/custom-css-overrides) section for more info.&#x20;