> For the complete documentation index, see [llms.txt](https://flexi-library.gitbook.io/flexi-sections/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flexi-library.gitbook.io/flexi-sections/docs/custom-css.md).

# Custom CSS

{% embed url="<https://www.youtube.com/watch?v=Aw4UhrR-nOw>" %}

Flexi gives you full control over styling with custom CSS, whether you want to target a single block or apply changes across your entire theme.

{% stepper %}
{% step %}

#### Enable Developer Mode

In the theme customizer, open a section or block and toggle on Developer Mode. This reveals advanced styling options.
{% endstep %}

{% step %}

#### Add a Custom Class

Enter a custom class name into the text input. This lets you target that specific section or block in your CSS.
{% endstep %}

{% step %}

#### Write Your CSS

You have two options:

* Local CSS → Write CSS directly in the section or block for one-off adjustments.
* Global CSS → Add your styles inside the Flexi app embed to apply them site-wide.
  {% endstep %}
  {% endstepper %}

This setup makes it easy to keep styles organized. Use local CSS for quick tweaks, and global CSS for consistent, brand-wide changes.
