Style selectors

Style selectors define what the browser should style — like a class applied to an element. When you apply the same selector to other elements, they inherit the styles defined by that selector. In other words, those elements take on the same visual styling.

Learn more about style selectors in Webflow below.

Tags

Tag selectors apply styles to all elements with the same HTML tag, like all <h1> heading elements or all <p> paragraph elements on your site. This is useful when you want to set consistent styles for a particular type of element without creating a class for each one. 

For example, you might want all paragraphs on your site to have the same font size and line height. You could set those specific properties on the <p> tag. 

Tag inheritance

• Tag styles apply to all elements with the same HTML tag.
• Tag styles are overridden when an element property is set by a class (tag styles only apply to elements that don’t already have class-based styling).

Classes

A class is a reusable set of styles that you apply to one or more elements. Classes help you keep your design consistent and make global updates easier by allowing you to control multiple elements from one place.

For example, you might create a class called card to style background color, border radius, and padding for content cards across your site.

Class inheritance

• Styles set on a class apply to every element using that class.
• Changes to a class update all elements using that class, unless a more specific style (like a combo or utility class) overrides them.

States

You can also style different states of an element — like hover, focused, or pressed — using the same class. These styles only appear when someone interacts with the element in that way.

For example, you might want a button to change background color on hover or add a subtle shadow when focused for accessibility.

State styles are saved within the class, so you don’t need to create a separate class for each interaction. Just select the element, choose a state from the dropdown in the Style panel, and apply your styles.

Combo classes

A combo class is a variation of a base class. It lets you add or override styles on top of the base class without affecting other elements that use the original.

For example, if you have a card class, you could add a combo class like is-featured to change the background color or add a border for featured content, while keeping the base card styles like padding and font size.

Combo class inheritance

• Combo classes inherit all styles from the base class.
• If you override a property on the combo class, that property no longer inherits from the base.
• Updates to the base class still affect the combo class unless that property has been overridden (set on the combo class).

Global classes

Global classes (also called utility classes) are single-purpose styles you can apply on top of any element. They’re not connected to a base class and are designed to be flexible, stackable, and reusable. 

For example, you might create a global class called u-shadow-medium to add a consistent drop shadow to any element — including cards — without affecting the rest of the element’s styles.

Global class behavior

• Global classes are standalone and don’t inherit from or pass styles to other classes.
• They apply only the styles set on that class, and can be layered with other classes on the same element.

Ready for more?

Click Complete & continue in the Course progress box on the right to review how you can view and manage Style selectors on your site.