Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

CSS Properties panel

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.

NoteNote

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

Cc294861.edef891a-6b74-4192-8f7f-5079614b9112(en-us,Expression.40).png

The Show categorized list button Cc294861.72857b68-7a97-436e-a9b4-721fa0dcfd9f(en-us,Expression.40).png organizes the list of properties under categories, such as Font and Block.

The Show alphabetized list button Cc294861.926ae15d-105e-4df3-8d3e-b98491cfbae4(en-us,Expression.40).png organizes the list of properties into a single alphabetical list.

The Show set properties on top button Cc294861.2548942a-b2cf-4720-868a-934e356841bf(en-us,Expression.40).png organizes the list of properties so that properties that you have set in the selected style appear at the top of the list.

Cc294861.957413f8-28e0-4dc7-a144-0598679350b9(en-us,Expression.40).png

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.

Cc294861.13f14333-cc5f-457a-863b-ccd449500941(en-us,Expression.40).png

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.

Cc294861.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(en-us,Expression.40).png

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.

Cc294861.9c26150c-cd15-44bb-bf69-ff72093d3d71(en-us,Expression.40).png

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.

Cc294861.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(en-us,Expression.40).png

When the Show categorized list button Cc294861.72857b68-7a97-436e-a9b4-721fa0dcfd9f(en-us,Expression.40).png and the Show set properties on top button Cc294861.2548942a-b2cf-4720-868a-934e356841bf(en-us,Expression.40).png are both selected, properties of the selected style are grouped at the top of each category's list of properties.

Cc294861.3ca58ea1-12d2-4379-9b89-e415efd03ca4(en-us,Expression.40).png

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 Cc294861.831cb746-62cc-437e-b8a7-17695a0edd28(en-us,Expression.40).png or pick button Cc294861.51972403-155f-4381-850b-1a581a6163d2(en-us,Expression.40).png and selecting a value.

Cc294861.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(en-us,Expression.40).png

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 noteTip
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.

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.