Use classes to save styling information that applies to as many elements as you want across your project.
In this lesson:
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.
To create a class:
That’s it — you’ve created a class!
You can also create a class manually before adding styles by typing in a class name in the Selector field.
There are 3 ways to access the Selector field:
To apply the same class to as many elements as you want:
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 with keyboard arrows and pressing Enter.
Once a class has been created and applied to various elements, you can edit that class.
To edit a class:
Any styling adjustments will affect all instances where that class is used throughout the project.
A class is given a unique name based on the element type, but you can always rename it.
There are 4 ways to rename a class:
The new name will be reflected in the Style manager and the Selector in the Style panel.
You can also rename a class in the Style manager.
Best practices for CSS naming:
Pro tip: When 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.
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:
You can duplicate and tweak a class without changing your original class.
To duplicate an existing class:
Must know: A duplicated class is a new class disconnected from the original class — styles no longer cascade to the duplicated class.
After you’ve applied a class to an element and added styling, you might want to make a small styling change on one instance of this class without affecting other elements with that class. Instead of creating a new class and recreating the same styles, Webflow lets you create what we call a combo class, and apply style overrides to create a unique variation.
You can add combo classes to elements by typing in a new class name in the Selector field right next to the base class.
You can access the Selector in 3 ways:
Any subsequent class after the first base class is called a combo class. Since the combo class has only been added to the selected element, any styling changes made to this element will not affect other instances of the base class.
If you’d like another element to have the same base class and combo class, you can apply these classes one after the other — first apply the base class and then apply the combo class.
Keyboard shortcuts: When typing a class name in the Selector field, typing a comma will add that class and allow you to quickly type in the next combo class without having to refocus the selector field.
Once you create a combo class, you can add new styles or override styles inherited from the base class. The changes will only affect the combo class.
In the Style Panel, the inherited styles are indicated in orange, and overridden or new styles will be indicated in blue.
When styling an element with a combo class, all style changes only affect the combo class that's because the combo class is a more specific selection. If you wish to style the main, base class, you can access it using the inheritance menu above the selector:
All changes made to the base class will apply to all elements that have that base class applied, including the selected element with the combo class.
Click back above the selector to return to styling the combo class
Some styling changes on the base class might not be visible on the combo class if you’ve already styled that same property on the combo class. That’s because the value will be overwritten by the combo class. These styles are indicated with a red strikethrough.
Combo classes inherit the styles of a base class. They are a great way to create variations of this base class. But, it's not recommended to create more than one combo class since it gets hard to manage the inheritance of multiple levels of combo classes.
If you see yourself wanting to make even deeper variations it's best to duplicate a class that creates a new separate class with all the stylings of the original class.
You can also use global classes to bring a specific style to any class in your website. Global classes are specific styles to a wide range of elements. Similar to combo classes, global classes are added to base classes. However, the original element that you style the global class is separate from the base class element. A great example of planning a global class style is creating a drop shadow style that will be used throughout the website.
To style global class elements, we suggest creating a page where all your global class elements can live, like a Style guide page. Here you can do the following:
And that’s it! You now have a global class that can be used in combination with other classes
Note: The name you use for a global class will apply styles to global classes with the same name.
By adding the global class on top of any other class, you can apply the global class’s styling properties to other classes.
Something went wrong while submitting the form. Please contact email@example.com