Learn all about the Style panel and how to customize the layout and style of elements in Webflow.
The Style panel, located in the Designer, is where you can visually control and style every element in your project. Whether you want to change an element’s layout, background color, or typography — you can do it all in the Style panel.
Here, you not only style individual elements, but you can also save styles as classes that allow you to reuse them throughout your project. We’ll provide an introduction to classes and combo classes below before we dive into the anatomy of the style panel so that you know how — and why — to use classes in your project.
In addition to creating, editing, and styling elements and classes, you can also customize layouts for different devices in the Style panel using Webflow's built-in responsive breakpoints, also known as media queries. In Webflow, styles can be set on the desktop view, but changes to these styles can be specific to a desktop, tablet, mobile landscape, and mobile portrait view.
In this introduction to the Style panel, we’ll cover:
In the Style panel, you can style individual elements; however, making manual style changes to every element can be tedious and time-consuming. Enter: classes.
Classes save styling information that you can apply to as many elements as you want — throughout your entire project. The moment you begin styling an element in the Style panel, a class is automatically created and applied to the selected element. You can also create and rename your classes manually, which we’ll walk you through below.
In the Style panel, you can also 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.
This overview just scratches the surface of what classes are and what you can do with them — we’ll dive into how you can access, create, and edit combo classes in the Style panel below.
The first thing you’ll see in the Style panel when you select an element is the element type. This is displayed at the top of the Style panel to indicate whether you’re styling an image, a div block, a form, etc.
Below the element type, you’ll see the selector field, where you’ll see every tag, class, and combo class that is applied to that element. Here, you can also create new classes or combo classes.
When you begin styling an element, it will automatically be assigned a class name based on the element type. You can rename this — or any other class — in the selector field by double-clicking the class name in the selector field and entering a new name.
To create a new class, enter the class name into the selector field.
You can remove a class from an element in the selector field. This will not remove the class from the Style manager or project because this class may be reused for styling other elements at any time. Classes can be fully removed from the Style manager and project only when they aren’t connected to an element.
To change the way an element looks and behaves in a specific state, such as hover or focus, select the state in the states dropdown menu located in the selector field. Learn more about styling states.
Above the selector field, you’ll find the inheritance menu. Here, you’ll see the parent and ancestor elements of the selected element — all the way back to the global tag. From the inheritance menu, you can also select and update the style of any class.
The inheritance menu also shows you the base class for combo classes and when a state is selected, it indicates which device you’re applying the styling to.
Under the selector field, you’ll see the number of times the class or tag in the selector field is being used on the current page and across the entire project.
To see what elements are affected on the current page, click the target icon or text. This will toggle outlines around all elements that will be affected by any changes you make to the selected class or tag.
Different sections in the Style panel control different types of styles. Each section contains different CSS properties that can be visually manipulated and previewed on the canvas. Here, you can expand and collapse each section.
Once you add an element to the canvas, the way it appears on the canvas depends on the default styles applied to that element type.
There are six display options that we cover in more detail in our display settings tutorial:
In the spacing section of the Style panel, you can define an element’s spacing — the breathing room outside or inside of an element's boundary.
You can add spacing to the top, bottom, left, and right of an element. You can apply the spacing values to one side, two complimentary sides, or to all four sides.
Learn more about element spacing.
By default, an element will either span to fill the width of its parent element or take the size of the content within it. In the size section of the Style panel, you can customize the width, height, and overflow settings.
Size settings may be disabled for elements such as containers and columns. Learn more about sizing settings in the Style panel.
The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.
There are five different position properties: There are five different position values: static, relative, absolute, fixed, or sticky.
Learn more about position, float, and clear settings.
In the typography settings in the Style panel, you can control exactly how text is displayed in your project.
Setting any typography style to a particular element will apply those settings to all text elements within the selected element and its child elements.
Learn more about typography settings and best practices.
In the background settings, you can add a background image, gradient, or color to any element except media elements.
Here, you can also change the size, position, and tile display of any background image.
Learn more about background settings.
Borders define the radius of an element’s edges or create outlines on one or more sides of an element's boundary.
Here, you can define the radius size, style, width, and color for element borders. Learn more about border settings in the Style panel.
In the effects settings, you can set different effects on an element. These include: opacity, box shadows, transforms, transitions, filters, and cursors.
Here, you can also apply an effect to a specific state, such as a hover state.
Once a section is collapsed, colored dots will appear next to the section name if there are any local or inherited styles applied to any property within that section. These dots (indicators) identify the source of styling — whether the style is applied to the selected element, or the current class, or inherited from a base class, a parent element, a global tag, or a larger viewport.
You can add more styles, override inherited styles, or remove any of these styles. You can also edit inherited styles by selecting the source from the inheritance menu.
An orange style icon means that the current style is applied to an ancestor of the selected element. This style, applied to the selected element, is being inherited from a tag, a base class, a higher breakpoint, or from a text style on a parent element. Clicking the indicator will show where the style is being inherited from.
You can either override the inherited styles, indicated by the orange style icon, or go to the class or tag and edit the style there. You can access all the classes and tags that style the current element from the inheritance menu. From this menu, you can select and temporary style a class/tags. For example, with an H1 heading selected, we can show the Inheritance menu and select the All H1 Headings tag.
If the style indicator is blue, it means the style is coming from the current class, tag, or breakpoint. The indicator will also become blue when you override an inherited (orange) style.
You can remove any blue indicators, or local styles, by clicking the blue icon or label and resetting the style.
Some styles, such as the Grid child settings, apply only to the selected element. These styles aren't saved in the class. For these styles, the indicator is pink. This means the style is applied to the currently selected element on the current breakpoint.
The indicator will also become pink when you override an inherited (orange) style on smaller breakpoints. You can remove any pink indicator by clicking the pink label and clicking reset.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org