Edit CSS rules

• In the left sidebar of the Resources tab, open the Stylesheets folder, select a CSS stylesheet, then click in the main pane and begin editing.

• A rule's text can also be copied or saved as plain CSS, including rules that have been commented out. The checkbox to the left of each property comments or uncomments the property when clicked. Option-click a property definition to reveal the property's definition in a stylesheet, if applicable.

1. In main area of the Elements tab, select an HTML element.

2. In the right sidebar, click the Styles pop-up menu and choose Styles–Rules.

   The Styles Rules section shows all CSS rules that apply to the element for the current media type. This view displays the rules that contribute non-initial CSS properties to the selected element's computed style.

   Each rule consists of a text editor populated with the CSS property declarations provided by that rule. Rule selectors and declarations are fully editable using normal CSS syntax to add, remove, and comment out rules.

3. In the right sidebar, scroll to the rule you want, double-click the name or value of the property you want to modify, then enter your changes.

   

   A yellow warning icon next to a property declaration with a red strikethrough indicates that a quick-fix suggestion is available. Click the icon to apply the quick fix suggestion described in its help tag.

   Tip: You can also modify selected CSS values by pressing and holding the Option key, then pressing arrow keys on the keyboard.

4. If necessary, do any of the following:

   • Autocomplete a rule’s value while editing it: Press Escape. You can save (Command-S) these rules directly to file.

   • Comment out a CSS rule: Click the icon of a CSS rule. Rules that cannot be edited, such as those from the user agent stylesheet, have a lock icon in the upper-right corner of the rule header.

   • Comment out individual properties: Move the pointer over a property and when its blue checkbox appears, deselect the checkbox.

   • Copy a rule as plain text: Control-click the icon of a CSS rule, then choose Copy Rule from the shortcut menu. You can now paste the rule into a document in any text-editing app.

   • Show a property in its stylesheet: Option-click the property; the main pane of the Elements tab displays the property in context in its stylesheet.

You can modify what’s shown in the right sidebar of the Elements tab.

Do any of the following:

• Filter the content shown in the sidebar: In the Filter Styles field at the bottom of the right sidebar, enter text to show only those style rules with a selector or properties that match.

• Add a new rule to the selected element: Click the plus sign button (+) to the left of the Filter Styles field, then enter properties at the insertion point.

• Add or remove classes to an element: Click the Classes button to the right of the Filter Styles field display checkboxes for each of the classes applied to the element. Select or deselect the checkboxes. In this new Classes section is another + icon. This feature allows you to add a new class to the element.

  

Several visual properties have graphical editors in the Elements tab. These editors make it easier to edit these properties by providing visual previews or interpretations of numeric property values. They are located in the Styles–Rules section of the right sidebar.

• Click the swatch icon to the left of a visual property value, then modify the controls in the graphical editor that appears:

  • The color editor visualizes the specified color using a color wheel with sliders for brightness and alpha. (Shift-click the swatch icon in the sidebar to change the color format.)

    

  • The gradient editor visualizes gradients linearly, allowing you to change gradient types, edit gradient stop positions, and select colors using an embedded color editor for the selected stop. To remove a stop, drag it above or below the gradient. To add a new stop, click on empty space in the track below the gradient. To move an existing stop, drag it left or right. Gradients must have at least two color stops.

  • The cubic bezier and spring editors show a preview animation that uses the current parameters, a curve editor, and text fields for manually editing parameter values.

• Dismiss an editor by pressing Escape. Changes to the property value in the editor are synced with the values in the property declaration.