# How do I make CSS classes available in the WYSIWYG formats drop-down menu?

> Choose a CSS file on a WYSIWYG Editor Configuration, then use Custom Styles to limit which classes editors can pick.

URL: https://www.hannonhill.com/cascadecms/latest/articles/developing-in-cascade/css/make-css-classes-available-in-wysiwyg.html
category: Developing in Cascade
article-type: how-to
content-kind: faq
release-availability: all
tags: design, wysiwyg
updated: 2026-10-06

To let users apply styles to their content in the WYSIWYG editor, attach a CSS file to a WYSIWYG Editor Configuration. You can do this at the Site level or the System level.

## At the Site level

1. Click **Manage Site** > **WYSIWYG Editor Configurations**.
1. Select your configuration, or click **Create** to add one.
1. In the **CSS File** field, click **Choose File**, select the CSS file containing your classes, and click **Choose**.

## At the System level

The System Default configuration is used for Sites without one of their own.

1. Click **Menu** > **Administration**.
1. Under Preferences, click **System Default WYSIWYG Editor Configuration**.
1. Click **Edit**.
1. In the **CSS File** field, click **Choose File**, select your CSS file, and click **Choose**.

## Limiting which classes appear

Once a CSS file is chosen, a **Custom Styles** field appears. Use it to list the specific classes you want editors to see. For example, given a CSS file containing:

```css
.red {
    color: red;
}

.blue {
    color: blue;
}

.yellow {
    color: yellow;
}
```

if you only want `blue` and `red` available, enter `blue, red` in **Custom Styles**. Those two then appear in the editor's Formats drop-down.

## Assigning at the Data Definition or Content Type level

At the Data Definition level:

1. Click **Manage Site** > **Data Definitions**.
1. Select your Data Definition and click **Edit**.
1. Click the pencil icon on your WYSIWYG field, then **Show Advanced Settings** > **Choose WYSIWYG Editor Configuration**.

At the Content Type level:

1. Click **Manage Site** > **Content Types**.
1. Select your Content Type and click **Edit**.
1. Under **Type of Content**, select **No Data Definition (WYSIWYG Only)**.
1. Click **Choose WYSIWYG Editor Configuration** and pick your configuration.

> To check which Editor Configuration a WYSIWYG is actually using, click **Tools** > **Info** inside the editor.

See [WYSIWYG Editor Configurations](https://www.hannonhill.com/cascadecms/latest/articles/content-authoring/wysiwyg-editor-configurations/index.html) for the full set of options, and [Adding classes to tables](https://www.hannonhill.com/cascadecms/latest/articles/content-authoring/wysiwyg/adding-classes-to-tables.html) for the authoring side.