Use the CSS Properties task pane

You can use the CSS Properties task pane in tandem with an open Web page, external CSS file, or with the Manage Styles task pane to review and change the properties and values of existing styles.

When you use the CSS Properties task pane with a Web page, the task pane enables you to quickly see all of the styles that the current selection in your Web page uses, the order of precedence of those styles, and all of the properties and values of those styles.

Tip: In the CSS Properties task pane, right-click a selector under Applied Rules to display a shortcut menu that contains additional options for working with your CSS.

CSS Properties task pane

1. The Show categorized list button button image organizes the list of properties under categories, such as Font and Block. The Show alphabetized list button button image organizes the list of properties into a single alphabetical list. The Show set properties on top button button image organizes the list of properties so that properties that you have set in the selected style appear at the top of the list.

2. The Summary button lists together, under the CSS Properties column, all of the properties that affect the current selection, instead of only the properties of a selected style. In summary mode, you can click a property under CSS Properties to outline the associated rule under Applied Rules. To get out of summary mode, click Summary again or click a rule under Applied Rules.

3. Applied Rules lists the selector of each style that affects the current selection. Styles are listed in ascending order of precedence, from lowest precedence at the top of the list to highest precedence at the bottom. Point to a selector to see the entire rule set in a ScreenTip. Select a selector to display its properties under CSS Properties. Double-click a selector to go to the code of that rule set.

4. This column lists the tag to which each style is applied and the selector of the style. Point to a row in this column to see the applied rule. The column is labeled Current Page when the selected style resides in an internal CSS or labeled with the name of an external CSS file when the selected style resides in an external CSS. You can point to the external CSS file name to see the path to the file or click the external CSS file name to open the file.

5. CSS Properties lists the values of properties you've set in the style selected under Applied Rules and also all unset properties. Double-click a property to go to the code of that rule set.

6. When the Show categorized list button button image and the Show set properties on top button button image are both selected, properties of the selected style are grouped at the top of each category's list of properties.

7. In the box next to the property name, you can set the value of a property by typing a value or pointing at the box and then clicking (when available) the drop-down arrow button or Pick button button and selecting a value.

8. Properties that have a red line through them are set by the selected style but either aren't inherited by the current selection or are overridden by another style. To see a ScreenTip that provides more information, point to a crossed-out property. The ScreenTip for overridden properties identifies the overriding property.

Top of Page

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×