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

# Host Page CSS

> How your own website or app stylesheet interacts with Website & App Surveys, and where survey styling belongs.

Website & App Surveys render inside your page, in an element with the id `fbjs`. Your page's CSS and the survey's CSS meet there. This page explains how to keep them apart.

> [!TIP]
>
> To style the survey itself, use [Custom CSS](https://formbricks.com/docs/surveys/general-features/custom-css.md) in Formbricks. It applies
> wherever the survey is shown, including link surveys and mobile apps, it wins over the built-in survey
> styles, and it comes with stable hooks for buttons, choices, fields and more.

## Keep Your Page CSS Out Of The Survey

The survey's built-in styles are protected against many global rules, but broad rules can still reach the survey, especially with `!important`: `* { font-size: 12px !important; }` or `button { background: red !important; }`.

If one of your rules changes the survey, exclude the survey from it:

```css globals.css theme={null}
/* Applies to every button on the page except those inside a survey */
button:not(#fbjs *) {
  border-radius: 0;
}
```

## Styling The Survey From Your Page CSS

You can still style Website & App Surveys from your own stylesheet, but Custom CSS is the better place:

* Your page CSS only reaches surveys on your pages, not link surveys or surveys in mobile apps.
* Many built-in survey styles sit in cascade layers and win over your page CSS, even with `!important`. Custom CSS is placed above them and always wins.

If you style the survey from your page anyway, target only the supported contract: the `data-fb-part` [hooks](https://formbricks.com/docs/surveys/general-features/custom-css.md#stable-hooks), their [states](https://formbricks.com/docs/surveys/general-features/custom-css.md#states) and the `--fb-*` [variables](https://formbricks.com/docs/surveys/general-features/custom-css.md#variables). Always scope rules under `#fbjs`.

```css globals.css theme={null}
#fbjs {
  --fb-survey-brand-color: #0ea5e9 !important;
  --fb-button-bg-color: #0ea5e9 !important;
  --fb-button-border-radius: 12px !important;
}
```

> [!WARNING]
>
> Generated class names such as `.button-custom`, `.label-headline` or `.bg-input-bg` are implementation
> details. They are not supported selectors and can change in any release.

## Troubleshooting

**My page styles change the survey**

* Find the rule in the browser inspector and exclude the survey with `:not(#fbjs *)`.

**My survey styles affect the rest of my page**

* A selector is missing `#fbjs`. Prefix every survey rule with it, or move the rules to [Custom CSS](https://formbricks.com/docs/surveys/general-features/custom-css.md), where scoping is automatic.

**Changes do not show up**

* Hard refresh the page to clear cached SDK files.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.