> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/portals/building-a-portal/custom-css.md).

# Custom CSS

Add your own CSS when the Style panel doesn't go far enough.

The **Code** tab in the builder sidebar lets you add CSS of your own, for the things the [Style](/portals/building-a-portal/style.md) panel doesn't cover.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FHIxMCWajg9NC5Bw5Rs8Z%2Fimage.png?alt=media&#x26;token=b62ddcb3-fe31-4aa6-a797-2e58c607b011" alt=""><figcaption><p>The <strong>Code</strong> tab in the builder sidebar, where custom CSS is written.</p></figcaption></figure>

## Add CSS

1. Open the **Code** tab.
2. Turn on **Enable custom CSS**.
3. Write your rules in **Your CSS**.
4. Select **Publish changes** to make them live.

**Full screen** gives you more room; the **Styling reference** panel lists the classes and variables the Portal exposes, so you target what the templates actually render rather than guessing.

**Clear** empties the editor.

## When to use it, and when not to

Reach for the Style panel first. Anything you set there follows the Portal — it survives theme changes, adapts across device widths, and keeps working when sections gain variants. Custom CSS does none of that on its own.

Custom CSS is right for the genuinely specific: a brand detail the panel has no control for, a tweak to one section. It is wrong for things like colours and type, which have proper controls.

{% hint style="warning" %}
Custom CSS is not checked against anything. A rule that targets an internal class can stop working when that part of the Portal is rebuilt, and nothing will warn you — the Portal will simply look wrong. Keep it small, and prefer the variables in the styling reference to class names.
{% endhint %}