# Styling

How to customise the visual appearance of your pages. Most styling needs are handled at three levels: component settings, the theme, and a small amount of custom CSS for the cases neither covers.

## Component-Level Styling

Most components have built-in styling options in their settings panel. Common options include:

### Background

| Setting | Description               |
| ------- | ------------------------- |
| Color   | Background colour (solid) |
| Image   | Background image          |

### Border

| Setting | Description                                            |
| ------- | ------------------------------------------------------ |
| Style   | None, solid, dashed, dotted                            |
| Width   | Border thickness                                       |
| Color   | Border colour                                          |
| Radius  | Corner rounding (0 = square corners, higher = rounder) |

### Spacing

| Setting | Description                                                               |
| ------- | ------------------------------------------------------------------------- |
| Padding | Internal spacing (space between the component's edge and its content)     |
| Margin  | External spacing (space between the component and neighboring components) |
| Gap     | Spacing between child components (layout components only)                 |

### Text Styling

Available on text-containing components:

| Setting     | Description                  |
| ----------- | ---------------------------- |
| Font size   | Text size                    |
| Font weight | Normal, bold, light          |
| Color       | Text colour                  |
| Alignment   | Left, center, right, justify |

## Using Theme Colours

Your page automatically picks up styles from the active theme (configured in the Theme Builder). This means:

* **Colours** — Primary, accent, background, and text colours are applied consistently.
* **Fonts** — The theme's font family and sizes are used as defaults.
* **Border radius** — The theme's default corner rounding applies to cards, buttons, and inputs.
* **Dark/light mode** — If the theme supports both modes, components adapt automatically.

When you configure a component's colour, you can choose:

* **Theme color** — A reference to a theme color (e.g., "Primary", "Accent"). If the theme changes, the component updates automatically.
* **Custom color** — A specific color value. This overrides the theme and stays fixed.

> **Tip:** Use theme colours whenever possible. This ensures consistency and makes it easy to rebrand by changing the theme rather than editing every component.

## CSS

For styling that goes beyond component-level options, use the **CSS** component (see [Advanced Components](/client-admin-guide/active-workflows/getting-started/advanced-components.md)).

### Adding CSS

1. Drag a **CSS** component onto your page (it can go anywhere — it is invisible to users).
2. Click the component and enter your style rules in the settings panel.
3. The styles apply immediately in the editor.

### When to Use CSS

* Custom animations or hover effects on cards
* Adjustments for specific screen sizes
* Styling for content inside HTML components
* Overriding default component appearances

> **Good to know:** CSS by default apply only to the current page. Use the "Scoped" setting to control whether styles affect just this page or all pages.

## Styling Best Practices

* **Use theme colours instead of fixed colours.** This makes your pages theme-aware and consistent across your portal.
* **Use component-level settings first.** Only reach for CSS when built-in options are insufficient.
* **Keep custom styles minimal.** Every custom style rule is a maintenance burden. Prefer standard components and settings.
* **Test in both light and dark modes.** If your theme supports dark mode, verify that custom styles look good in both.
* **Test responsive behavior.** Custom styles can break layouts on smaller screens if not carefully written.
* **Add comments.** Explain what each custom style does and why it is needed. Future admins will appreciate it.

## Finding Style Options

If you want to change something visual on a component but cannot find the setting:

1. **Check the component's settings panel** — Click the component and look through all available settings on the right.
2. **Check the Configure button** — Some components have detailed settings behind a Configure button.
3. **Check the Theme Builder** — Global changes (colours, fonts, corner rounding) are best handled in the theme.
4. **Use CSS** — For page-specific visual adjustments that cannot be done through settings or the theme.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>CSS</strong></td><td>The block for injecting custom CSS into a page.</td><td><a href="/pages/LXJAsk3WqG8zH44UmBR0">/pages/LXJAsk3WqG8zH44UmBR0</a></td></tr><tr><td><strong>Theme Builder</strong></td><td>Global theme settings — colours, fonts, corner rounding, dark mode.</td><td><a href="/pages/tKpdt9UlBIUiF0YP8r0t">/pages/tKpdt9UlBIUiF0YP8r0t</a></td></tr><tr><td><strong>Best Practices</strong></td><td>When to use custom styles vs. standard component settings.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/styling.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.