> 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: About Custom CSS

## Article: About Custom CSS

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

## Article Content:

# About Custom CSS

CSS allows you to customize the appearance of a site, from colors and fonts to sizes and positions of different elements. You can even add design elements that aren't yet available in the editor.

<iframe width="560" height="315" src="https://www.youtube.com/embed/xynm4m83CqM?si=YG1ekaMuGejUtYNV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

For example, you can:

- Create a blur filter and apply it to a site element.
- Use mix-blend-mode properties to combine different elements.
- Add a gradient color effect to text.

## Supported IDEs

You can customize the CSS using:

- The [editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/code-editor/about-the-code-editor.md) (Wix Studio and Wix Editor)
- The [Wix IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/wix-ide/about-the-wix-ide.md) (Wix Studio)
- Your [local IDE](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/ides/git-integration/about-git-integration-with-wix-cli.md) (Wix Studio and Wix Editor)

## Classes

Classes group elements on a site together to easily apply the same styling to all the instances of that group. You can apply custom CSS styling to a global class, semantic class, or custom class.

### Global classes

Global classes are built-in and made available to a site. Applying a style to a global class affects the CSS styling of elements of that class globally, throughout the site. To get started, see the [list of available classes](https://dev.wix.com/docs/velo/velo-only-apis/$w/styling-elements-with-css.md#available-classes).

### Semantic classes

Most global classes are divided into more specific semantic classes to customize individual aspects. For example, you can apply a custom style to all buttons with `.button` or only apply a style to the label text of a button with `.button__label`. See the [documentation of each element](https://dev.wix.com/docs/velo/velo-only-apis/$w/styling-elements-with-css.md#available-classes) for specific information on supported semantic classes.

### Custom classes

In addition to the built-in, global classes you can also create custom classes and apply CSS styling to just those. For example, you may want to apply a certain animation style to all subscribe buttons throughout a site, but not to all buttons in general. To do so, you can create a custom class called `.button--subscribe` and add custom styling for all elements that you add this class to.

## See also

- For further information on CSS styling options, refer to the [MDN CSS reference docs](https://developer.mozilla.org/en-US/docs/Learn/CSS)
- [Wix Studio webinar: Enhance your designs with CSS editing](https://www.youtube.com/watch?v=xynm4m83CqM)