Inheritance in the Style panel

When you select an element, the Style panel shows the active selector — the one you’re currently styling. If the element is inheriting styles from other selectors, you can click the hyperlinked Inheriting text to view and switch between them.

Farther down in the panel, the color of each property label tells you where that style is coming from:

• Blue means the style is set directly on the current selector.
• Amber (orange) means the style is inherited — either from another selector or a higher breakpoint.
• White means the property is not styled on the element on any selector.

These visual cues make it easy to understand what’s affecting your design and where each style is coming from.

Management in the Style selectors panel

The Style Selectors panel gives you a full list of every selector used in your project. Their color and arrangement indicate their type.

Indicators in the Style selectors panel

• Pink = HTML tag selectors (like All Paragraphs)
• Blue = class-based selectors (including base, combo, and global classes)
• A curved arrow = a combo class connected to a base class

There’s a lot more you can see and do in the Style selectors panel, like:

• Search for a class name or style property
• See which elements are affected by a class (using its styles)
• Rename a class
• Clean up unused styles

Renaming a class doesn’t change its styles or remove it from any elements — it just updates the name everywhere that class is used.

Cleaning up unused selectors

Cleaning up unused selectors helps keep your project organized and improves site performance by removing unnecessary styles and CSS from your site.

To remove them, click the 'Clean up' button (shaped like a broom) in the top-right of the Style selectors panel. You’ll see a list of any unused selectors and you can confirm which ones to delete.

Only selectors that aren’t applied to any elements will appear in the cleanup list. Remove the selector from all site elements prior to cleanup. 

Keep going.

Click Complete & continue in the Course progress box on the right to learn about CSS layouts.