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. Here we’ll cover:

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

Webflow class selector

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 rename this or any other class at any time in one of two ways:

  • Double-click on the class and type in a new name
  • Hover over the class and click on the dropdown that appears. In the menu select Rename class

Renaming the class will also change the name of the class throughout the project.

Rename classes in Webflow
Good to know
  • You can also rename a class in the Style manager. Learn more.
  • You can also rename the last class in the selector by pressing cmd + shift + enter.
Pro tip — naming classes
  • ‍It's best practice to give classes specific names based on their function and not there 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