Move a style to another rule

Use this guide when a property is set in the wrong place — for example a color typed directly on one element that should live in a shared class.

Select the element and open the Style tab with Style chosen in the rule selector.
Find the property row. The dot at the end of the row shows the current source: accent color for inline, green for a rule.
Click the dot. The menu shows the current source at the top.
Choose the destination:
- inline — moves the value onto the element itself.
- A rule from the list — moves it into that rule. Type in the search box to filter the list by selector.
- + new class — type a class name (existing class names are suggested), pick the stylesheet, and click Add. The class is also added to the selected elements.
The value is removed from its old place and written to the new one, as one undo step.

Common variations

Hover and focus rules. The rule list always includes the element’s state rules (.btn:hover), so you can move a property into one without forcing the state first.
Rules in <style> tags. Rules written in a <style> tag on the page are listed and can be used as a destination or a source.

Nothing happens. The property has no value to move — the dot is faded when the property isn’t set.