> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Apply Custom CSS Styles

## Article: Apply Custom CSS Styles

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/apply-custom-css-styles.md

## Article Content:

# Apply Custom CSS Styles

You can apply custom [CSS styling](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/about-custom-css.md) to any supported element on a site.

## Step 1 | Add the global.css file

Add a `global.css` file.

::::tabs

:::Wix-Studio

1. Navigate to **Page Code** in the Code sidebar.
2. In the **CSS** section, click **+ Add global.css**.

:::
:::Wix-IDE-or-Local-IDE

Add a `global.css` file to the `src/styles` folder.

:::
::::

## Step 2 | (Optional) Add a custom class to a site

In addition to the [available classes](https://dev.wix.com/docs/velo/velo-only-apis/$w/styling-elements-with-css.md#available-classes) you can add a new class to any supported element.

::::tabs
:::Code
Add 1 or more classes to the element with the `add()` method:

```javascript
$w("#myElement").customClassList.add("className1", "className2");
```

:::
:::Wix-Studio-Editor

1. Select an element.
2. In the CSS Classes panel, type your custom class in the Custom classes field:

   ![custom classes panel in editor](https://wixmp-833713b177cebf373f611808.wixmp.com/images/d8f840d04075e4169aee11d653dc1dfb.png)

:::
::::

## Step 3 | Apply custom styles to the class

In the [`global.css` file](#step-1--add-the-globalcss-file) add custom CSS styles to apply.

For example:

```css
.accordion {
  text-transform: capitalize;
  color: yellow;
}

.button--subscribe {
  background: linear-gradient(to bottom right, red, yellow);
}
```

You can also use [site theme CSS variables](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/site-theme-css-variables.md) to apply the site's theme colors and fonts to the class.

For example:

```css
.container {
  background-color: var(--wst-color-fill-background-primary);
}
```

## See also

- [About Custom CSS](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/css/about-custom-css.md)
- [Webinar: Enhance your designs with CSS editing](https://www.wix.com/studio/academy/webinars/enhance-your-designs-with-css-editing)
- For specific examples of available classes, refer to the [API documentation](https://dev.wix.com/docs/velo/velo-only-apis/$w/styling-elements-with-css.md#available-classes)
- For further information on CSS styling options, refer to the [MDN CSS reference docs](https://developer.mozilla.org/en-US/docs/Learn/CSS)