Intro to the Style Panel

 

The Style Panel in the Designer allows you to control and customize every aspect of styling. Here you can create a class, which lets you reuse styles throughout the project.

You can access the Style Panel by clicking the paintbrush icon at the top right of the Designer, or by using the shortcut S on your keyboard.

In this introductory lesson
  1. Top section
  2. Style sections
  3. Blue & orange indicators

Selector section

The top section of the style panel shows what element is selected, what class or element tag is being edited, and how many total elements are being affected by that class or tag.

Selected element

When you select an element, you will see the element type at the top of the Style Panel.

Selector field

Underneath the element type is the Selector field. This is where you can create a class, select an existing class, or select a tag for the current element. Anytime we’re styling an element, we’ll see that class or tag inside the Selector field.

Selector field
Selector field with a class name
Selector field with an element tag

Affected elements

Below the Selector field you can see how many times the class or tag in the Selector field is used on the current page and in the project. . Clicking the target icon or text will toggle a pink outline around the affected elements on the current page.

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

We’ve created guides for each property in these sections:

To see all the styles in the Layout and Typography sections, be sure to toggle on the advanced switch located in the section heading.

Each of these sections can be collapsed or expanded by clicking the label. Once they are collapsed, a blue or orange indicator will appear if there are any local or inherited styles.

Blue and orange indicators

You can see all the styles applied to an element in the Style panel by looking at the blue and orange icons/labels. You can add, override, or remove any of these styles.

Orange indicators

When the style icon or label is orange, it means that this style is applied on the element, but not on the current class in the Selector field. It is being inherited from another class, tag or from a text style on a parent element. Clicking the indicator will show where the style is being inherited from.

 

Overriding or editing inherited styles

You can either override the inherited (orange) styles 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. Then you can make changes and quickly jump back to the class when you’re done.

 

Blue indicators

If the style indicator is blue, it means the style is coming from the current class or tag. The indicator will also become blue when you override an inherited (orange) style.

Clearing local (blue) styles

You can remove any local styles (blue indicators) by clicking the blue icon or label and selecting Remove this style.

Shortcut key
To instantly clear a style, click any blue value in the Style panel while holding the alt (option) key ⌥.
Pro tip
It is a great practice to remove style properties when they are not needed or not in use. This prevents CSS cascading and inheritance issues when making your site responsive.