Intro to styling

In this lesson, we'll cover how to get started with styling in Webflow — through classes. First, we'll look at how to add classes. Then we'll cover how to change styles on a class. And then we'll look at a few class-related concepts to be aware of, like class sharing, class inheritance, and combo classes.

So let's start with adding a class. To add a class to an element, just click an element on the canvas, head over to the Style panel, and click on the selector box at the top — it'll say "no class set" — and type in a class name and hit enter. So as soon as you do that, you've just created and applied a class to this element.

Now, any style changes you make on this class in the Style panel will affect all elements that share this class. So for example, if I change the color of the text here, every other element with this same class would get that change. This is the big advantage of classes — you can make a change in one place and it ripples across your whole project.

Now let's talk about class inheritance. When you add a class to an element, it inherits some default base styles from Webflow — things like font size and color. These come from the Body class or the All Paragraphs class and so on, depending on the element type. If you change those defaults at the Body level, all elements that don't have an overriding class style will inherit that change. Understanding this hierarchy helps you build cleaner, more consistent sites.

Now let's talk about combo classes. A combo class is a secondary class you add to an element alongside an existing class. The combo class only applies to elements that have both classes. So it's a great way to create a variant of a style without duplicating the entire class. For example, you might have a "Button" class with your base button styles, and then a "Button is-dark" combo class for a dark variant. Any changes to the Button class will still apply to both, but the specific combo styles only affect those specific elements.

So to recap: add a class in the selector box, style it in the Style panel, and those styles will apply to any element using that class. Use class inheritance to set global defaults, and use combo classes to create variations without duplication.