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

## Article: Apply Custom CSS Styling

## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/apply-custom-css-styling.md

## Article Content:

# Apply Custom CSS Styling

You can apply custom [CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.md) to any supported element in your site.

## Step 1 | Add the global.css file

The way that you add the `global.css` file depends on the IDE you’re using.

### Editor (Wix Studio)

1. Go to the **Page Code** section of the code panel.
2. In the **CSS** section, click **+ Add global.css**.

### Wix IDE or your local IDE

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

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

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

You can add new custom classes with code or with the editor:

### Code

Add one or more classes to the element with the `add()` function:

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

### Editor (Wix Studio)

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 your class

In the [`global.css` file](#step-1–add-the-global-css-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/articles/coding-with-velo/frontend-code/custom-css/site-theme-css-variables.md) to apply your site's theme colors and fonts to your class.

For example:

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

## See also

- [About CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.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/api-reference/$w/styling-elements-with-css.md#api-reference_$w_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).