Edit CSS rules visually
You can also edit CSS rules using visual editors. These editors, located in the Styles–Visual area of the right sidebar in the Elements tab, let you try out CSS properties without needing to know their names or syntax.
In the right sidebar of the Elements tab, click the pop-up menu, then choose Styles–Visual.
The top of the sidebar lists the CSS rules of the element selected in the main pane of the Elements tab, ordered from highest to lowest specificity.
Select a rule at the top of the sidebar, then make adjustments to the visual editors in the lower part of the sidebar.
The visual editors are relative to the selected rule and appear in the lower part of the sidebar, organized into groups (Layout, Text, Background, Effects, Transition, and Animation) and subcategories. When a rule is selected, the values in its property declarations are prepopulated into the appropriate visual editors. As you make adjustments to the controls, the webpage in the main Safari window updates.
To copy, reset, or view the rule in context in its stylesheet, Control-click the rule, then choose Copy Rule, Rest, or Show Source from the shortcut menu.
To add new rules for pseudostates (:active, :hover, and so on) or create new rules for pseudoelements (::before, ::after), Control-click the rule, then choose any of the Add or Create commands from the shortcut menu.
For more information, see Force a pseudostate on an element.
To see matching elements in the DOM tree outline (in the main pane of the Elements tab), move the pointer over a rule at the top of the sidebar.
To discard any edits you’ve made, click the trashcan icon to the right of the header for the group you modified.
Edited groups for a selected CSS rule display a blue dot to the immediate right of the group header, indicating that unsaved changes have been made. Additionally, the affected CSS rule’s icon is dimmed in the list at the top of the sidebar.