The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values again one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

In this Lesson
  1. Creating classes
  2. Renaming classes
  3. Applying classes
  4. Removing classes
  5. Editing classes
  6. Creating class variants by duplicating classes or by adding combo classes

Creating classes

When you add elements to your project, these elements are either unstyled or have default styles. You can style any of these elements and override some default stylings as well. To style an element, you can select it and apply any style values in the Style Panel. For example, you can apply styles for positioning, typography, background, etc.

Automatically-created classes

The moment you begin styling an element, a class is automatically created and applied to the selected element. All styling adjustments made on this element are saved in this class.

Pro tip — styling HTML tags

Each time you want to style the HTML tag of an element, remember to select the tag from the selector menu before updating the style. For example, updating the typography of the body element without first selecting the Body(All pages) tag will create an automatic class called body and style the typography of the body of that page only.

Manually created classes

You can also create a class manually before adding styles by typing in a class name in the selector.


You can access the selector either by:

  • Clicking into the selector field in the Style Panel
  • Hitting CMD + Enter (on Mac) or CTRL + Enter (on Windows)
  • Right-clicking the element and clicking Add class in the context menu.
Add a class faster from the context menu
Add a class faster from the context menu or by pressing the shortcut keys

Renaming classes

By default, the automatically created class is given unique class name based on the element type. You can also rename classes directly in the Style panel in one of the following ways:

  1. Double-click the class name in the Selector, rename it, and press enter.
  2. Press CMD+SHIFT+Enter, rename the class, and press enter.
  3. Right-click the element, choose rename class, rename the class, and press enter.
  4. Hover over the class name in the Selector, click the dropdown that appears, choose Rename class, rename the class, press enter.

The new name will be reflected in the Style Manager and the Selector of the Style panel.

Rename classes in Webflow

You can also rename a class in the Style manager.

Best practices for CSS naming

  1. Class names are case-insensitive ("alert" is the same as "ALERT")
  2. Class names must start with a letter
  3. Class names should use alphanumeric format (a-z and 0-9) and hyphens
Pro tip — naming classes
It's best practice to use hyphens as logical grouping dividers (tab-menu) and give classes specific names based on their function and not their style. Good: form-button. Bad: blue-button.

Applying classes

You can apply the same class to as many elements as you want. Simply, select the element, type in the class name in the Selector field, then, press Enter.

As you start typing a class name in the selector, you can see the class name appear in the selector dropdown list. You can select the class by clicking on the class name or by navigating to it using the keyboard arrows and pressing enter.


Removing classes

If you want to apply a different class to an element that already has a class, you can remove the existing class in 2 ways:

  • Click in the selector field, use the backspace key to delete the class.
  • Hover over the class, click the down arrow, click Remove class
Remove classes in Webflow

Editing classes

Once a class has been created and applied to various elements, you can edit that class by selecting any element with that class and making your changes. Any styling adjustments will affect all instances where that class is used throughout the project.


Creating class variants

Sometimes, you might want to make a small styling change on one instance of a class. Instead of creating a new class and going through the entire process of re-creating the same styles, you can create a variant either by duplicating the class or by creating a combo class.

This makes it a whole lot easier to create variations on elements that share a lot of styles, like buttons, for example.

Duplicating classes

You can quickly duplicate a class and make a few tweaks, without messing up your original class. To duplicate an existing class, hover over the class, click the down arrow, click Duplicate class. Now, rename the class and press Enter.

Duplicate classes in Webflow
Must know
A duplicated class becomes a new class that isn’t connected to the original class. In other words, styles won’t cascade to the duplicated class anymore.

Combo classes

You can create a combo class that inherits the style values of the original class and allows you to add more styles only on that combo class. Learn more about combo classes.

Suggested reading list

Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form