Style panel overview

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!

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 create classes that allow you to reuse these styles throughout our 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 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:

  1. Classes overview
  2. Selector field
  3. States menu
  4. Layout and style sections
  5. Inheritance and applied styles indicators

Classes overview

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.

Selector field

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.

Creating and renaming classes in the selector field

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.

Deleting classes

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.

States

To change the way an element looks and behaves in a specific state, such as hover or focus, select the state in the states menu above the selector field. Learn more about styling states.

Inheritance menu

To the right of 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.

Open the Inheritence menu in the Selector to quickly select and style a parent element, a base class, or a tag.

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.

Affected elements

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.  

Layout and styling sections

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.

Layout

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:

  1. Block
  2. Flex
  3. Grid
  4. Inline-block
  5. Inline
  6. None

Spacing

In the spacing section of the Style panel, you can define an element’s:

  1. Spacing: the breathing room outside or inside of an element's boundary
  2. Margin: the space outside an element's border
  3. Padding: the space inside an element, between its content and its border.

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.

Size

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.

Position

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.

Typography

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.

Backgrounds

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

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.

Effects

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.

Learn more about how to set effects and other styles on different states.

Inheritance and applied styles indicators

Once a section is collapsed, a blue or orange indicator will appear if there are any local or inherited styles applied to any property within that section. These indicators identify the source of styling — whether the style is applied to 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.

Orange indicators

Am 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.

Blue indicators

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 on the blue icon or label and selecting remove this style from the menu.