CSS Properties panel

Article
10/10/2017

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

When you use the CSS Properties panel with a web page, the panel 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.

Note

If a CSS property is not supported by the CSS schema that is selected in the Authoring tab of the Page Editor Options dialog box, the list of values for that property appears blank in the New Style and Modify Style dialog boxes and the property is not listed in the CSS Properties panel.

For more information, see Set IntelliSense options for CSS.

CSS Properties panel

Cc294861.ba72a979-9ec1-49d5-b861-0e5492880dfb(en-us,Expression.40).png

	The Show categorized list button organizes the list of properties under categories, such as Font and Block. The Show alphabetized list button organizes the list of properties into a single alphabetical list. The Show set properties on top button organizes the list of properties so that properties that you have set in the selected style appear at the top of the list.
	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.
	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 at 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.
	This column lists the tag to which each style is applied and the selector of the style. Point at 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 at the external CSS file name to see the path to the file or click the external CSS file name to open the file.
	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.
	When the Show categorized list button and the Show set properties on top button are both selected, properties of the selected style are grouped at the top of each category's list of properties.
	You can set the value of a property by, in the box next to the property name, typing a value or pointing at the box and then clicking, when available, the drop-down arrow or pick button and selecting a value.
	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 at a crossed-out property. The ScreenTip for overridden properties identifies the overriding property. Tip In the CSS Properties panel, to display a shortcut menu that contains additional options for working with your CSS, right-click a selector under Applied Rules.

CSS Properties panel

See also

Tasks

Reference

Concepts

Additional resources