How to: Use the CSS Properties Window
The CSS Properties window enables you to view and modify cascading style sheet (CSS) style properties. For Web Forms pages, you can use the CSS Properties window in Design view. You can use it in Source view for any kind of page. You can also use it with an external CSS file or with the Manage Styles window.
To open the CSS Properties Window
- In the View menu, choose CSS Properties.
The CSS Properties window shows you all the styles that are used by the element that is currently selected in a Web page. You can also see the order of precedence of those styles, and all the properties and values of those styles.
An Overview of the CSS Properties Window
The CSS Properties window has the following elements.
UI Element |
Description |
|---|---|
Display buttons |
The top of the window displays the Show categorized list, Show alphabetized list, and Show set properties on top buttons. These buttons let you change the order in which properties are displayed. To have only the properties that have been assigned values appear at the top of each category, choose Show set properties on top. Properties that do not have values appear at the bottom of each category. |
Summary |
You can click the Summary button to list the properties of all styles that affect the selected element. This list includes properties that might not appear in the Applied Rules section. |
Applied Rules |
Indicates which style rules are applied to an element. If you select a rule from this list, its assigned properties are highlighted in the CSS Properties section below. If no styles are applied yet, the Applied Rules section shows no rules applied. Rules that are lower in the list have higher precedence over rules that are higher in the list. Right-click a selector to display a shortcut menu that contains additional options for working with styles for that selector. |
CSS Properties |
Use this section to view or set CSS properties for the style that is selected under Applied Rules. A red line through the properties indicates that those properties are not inherited by the current selection or are overridden by another style. |
Tip
If you double-click an applied rule or a CSS property that has an attribute valued assigned to it, Visual Studio opens the style sheet. The location of the rule definition is displayed. Alternatively, you can right-click a rule or property and choose Go To Code.
Modifying a Style by Using the CSS Properties Window
You can use the CSS Properties window to change the formatting or styling of a single element or of all elements that share a CSS class.
To modify the properties of a style
In the Applied Rules list of the CSS Properties window, select an element, an inline style, an element ID, or an element CSS Class.
In the CSS Properties section, change the properties.
Determining Which Styles Are Applied to an Element
The CSS Properties window enables you to see all styles that are applied to an element. You can also see which style properties are overridden. Overridden style properties are shown with a red line through them, which indicates that the property is not applied to the currently selected element.
For example, an element can have both an inline style rule and a style rule from a style sheet applied to it. In that case, the inline style rule overrides the style sheet rule.
To view a summary of all properties applied to a selection
Select an element on the page, and then click Summary to switch to summary mode.
In the CSS Properties section, all properties that are applied to the selected element are shown.
Click a property under CSS Properties to outline the associated style rule under Applied Rules.
Click the Summary button again to switch out of summary mode.
Note
If you hold the mouse pointer over a crossed-out property, a tooltip for a property that has been overridden identifies the property that overrides it.