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

## Article: About CSS Styling

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

## Article Content:

# About CSS Styling

CSS allows you to customize the appearance of your website, 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 any element in your site.
- 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/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio).
- The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio).
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio).

## Classes

Classes group elements on your 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 your site. Applying a style to a global class will affect the CSS styling of elements of that class globally, throughout your site. To get started, see the [list of available classes](https://dev.wix.com/docs/velo/api-reference/$w/styling-elements-with-css.md#api-reference_$w_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/api-reference/$w/styling-elements-with-css.md#api-reference_$w_available-classes) for specific information on supported semantic classes.

### Custom classes

In addition to the built-in, global classes you can also create your own 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 your 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

- [Apply custom CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/apply-custom-css-styling.md)
- 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)