Custom CSS

Add your own site-wide CSS without touching theme files.

The Custom CSS panel in Global Settings gives you a code editor for adding CSS that applies across your whole site. It's the place for tweaks that aren't covered by the visual controls — overriding a style, adding a utility class, or fine-tuning spacing globally.

The editor

The panel embeds a full code editor (Monaco, the same engine used by VS Code) with:

• CSS syntax highlighting and a dark theme.
• Quick suggestions / autocomplete as you type.
• Word wrap so long rules stay visible.

Anything you enter here is output site-wide and is saved with your other Global Settings.

Where Custom CSS fits

Use this panel for global rules. For CSS scoped to a single block, use that block's Custom CSS control on its Advanced tab instead — see, for example, the Container block's Advanced settings.

Tips

• Prefer the visual controls (Colors, Typography, Buttons, Shadows) first; reach for Custom CSS only when you need something they don't cover.
• Use the global CSS variables Styble generates — such as --styble-primary, --sp-styble-font-size-heading-1 and --styble-shadow-light-2dp — so your custom rules stay in sync with the rest of your design system.
• Keep rules specific to avoid unintended overrides, and comment your CSS so it's easy to maintain.
• See the Global Settings overview for how all panels fit together.