> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remapdb.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS styling

> Apply advanced CSS safely when built-in Branding controls are not enough.

Use this section when you need styling changes that are not possible through standard Branding controls.

Click the [**Branding**](https://app.remapdb.com/widget/branding) item in the main navigation.

## Where to edit custom CSS

* Go to the **Advanced** section.
* Use the **Custom CSS** field.

## Before you add CSS

* First try built-in controls in **Theme**, **Fonts**, and **Customize colors and sizes ...**.
* Use custom CSS only for edge cases.
* Keep rules scoped to the widget so website-wide styles are not affected.
* Prefer Remapdb CSS variables when changing colors, radius, borders, buttons, form controls, chips, charts, and quote panel styling.

## Add and save custom CSS

1. In **Advanced**, add your CSS in the **Custom CSS** field.
2. Click the **Save** button.
3. Check the widget preview.
4. Open a live page and verify the result.

## Validation rules you should know

* Do not add `<style>` tags.
* Very unsafe or invalid CSS can be removed during sanitization.

## Safe example

```css theme={null}
:root {
  --rdb-button-solid-bg: #17181c;
  --rdb-button-solid-color: #ffffff;
  --rdb-border-radius: 0.5rem;
}

#show-remap,
#quote-submit {
  font-weight: 800;
}
```

## Get help from an AI assistant

You can use your own AI assistant to generate CSS for the Custom CSS field.

Give the assistant this page first:

[AI widget styling context](/widget/branding/ai-widget-styling-context)

Then describe the style you want. For example:

```text theme={null}
Read the Remapdb widget styling context and generate CSS only.
Do not include <style> tags.
Make the widget match a dark luxury automotive website with black backgrounds, graphite form controls, white text, and subtle gold buttons.
Use Remapdb CSS variables where possible.
```

## Common mistakes

* Using very broad selectors that affect too many elements.
* Applying many `!important` rules and making future changes hard.
* Changing structural layout classes and breaking mobile rendering.
* Skipping live-page testing after save.

## Need help with styling

In **Advanced**, click the **Help me with styling** button when it is available.

<Info>
  Styling assistance availability depends on your [plan](https://app.remapdb.com/settings/billing) and [feature access](/feature-availability-by-plan).
</Info>

## Related actions

* [Branding](/widget/branding)
* [Theme and layout](/widget/branding/theme-and-layout)
* [Colors and typography](/widget/branding/colors-and-typography)
* [AI widget styling context](/widget/branding/ai-widget-styling-context)
* [CSS variable reference](/widget/branding/css-variable-reference)
* [Widget HTML and selectors](/widget/branding/widget-html-and-selectors)