> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started/styling.md).

# Styling

How styling works across the Page Builder — component-level options, theme integration, and when to reach for custom CSS.

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) |

### Border

| Setting | Description                                                 |
| ------- | ----------------------------------------------------------- |
| Width   | Border thickness (None, 1px, 2px, 3px, 4px)                 |
| Color   | Border colour                                               |
| Radius  | Corner rounding (None, Small, Medium, Large, XL, 2XL, Full) |

### 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 in its settings panel, you can choose from:

* **Color swatches** — Pre-defined color options.
* **Custom color** — Enter a specific hex color or use a color picker.

These are fixed to the page. To link colors to a live theme that auto-updates, configure your theme colors in the Theme Builder (see the Theme Builder section below).

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

### Light and Dark Mode Colors

If your theme supports both light and dark modes, you can author distinct colors for each mode. This means your pages automatically show the right colors depending on whether your users are in light or dark mode.

To set up light and dark mode colors:

1. Go to the Theme Builder.
2. In the navigation Styling tabs (Header and Sidebar), configure your light-mode colors and dark-mode colors separately.
3. Your pages will automatically switch between them.

For more details, see [Theme Builder](/netsuite-admin-guide/theme-builder.md).

## CSS

For styling that goes beyond component-level options, use the **CSS** component (see [Advanced Components](/client-admin-guide/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 you add applies to the current page while you have it open.

## 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="/client-admin-guide/getting-started/advanced-components.md#css">Advanced Components</a></td></tr><tr><td><strong>Theme Builder</strong></td><td>Global theme settings — colours, fonts, corner rounding, dark mode.</td><td><a href="/netsuite-admin-guide/theme-builder.md">Theme Builder</a></td></tr><tr><td><strong>Best Practices</strong></td><td>When to use custom styles vs. standard component settings.</td><td><a href="/client-admin-guide/getting-started/best-practices.md">Best Practices</a></td></tr></tbody></table>