The CSS Styles panel in All mode

In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.

You can resize either pane by dragging the border between the panes.

When you select a rule in the All Rules pane, all of the properties that are defined in that rule appear in the Properties pane. You can then use the Properties pane to quickly modify your CSS, whether it is embedded in the current document or linked by means of an attached style sheet. By default, the Properties pane shows only those properties that have been previously set, and arranges them in alphabetical order.

You can choose to display properties in two other views. Category view displays properties grouped into categories, such as Font, Background, Block, Border, and so on, with set properties at the top of each category. List view displays an alphabetical list of all available properties, and likewise sorts set properties to the top. To switch between views, click the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane. In all views, set properties are displayed in blue.

Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

Related topics

• The CSS Styles panel in Current mode
• Using the CSS Styles panel