Working with classes

Working with classes in Webflow is one of the most important skills to develop early, because classes are how Webflow's styling system works. Every style you apply in the Style panel is applied to a class, and understanding how classes work will help you build more consistent, maintainable sites.

When you select an element and open the Style panel, you'll see a selector field at the top. If the element doesn't have a class yet, it says "no class set." You create a class by typing a name in that field and pressing Enter. Any styles you apply after that are applied to that class, not just that one element.

The key thing to understand is that classes are shared. If you have three buttons all using a class called "Button," changing the background color on that class changes all three buttons at once. That's the power of classes — you define a style once, apply it many times, and update it in one place.

Combo classes let you create variations without duplicating a base class. A combo class sits alongside the primary class and only applies additional or overriding styles. So you might have a "Button" class for your base button styles, and a "Button is-outlined" combo class that removes the fill and adds a border.

Understanding class inheritance — how styles cascade from body level down to specific classes — and how to use the Style panel's selectors effectively will save you a lot of time as your projects grow in complexity.