How to: Use the CSS Properties Window

How to: Use the CSS Properties Wind...

Switch on low bandwidth view

Collapse All

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Microsoft Visual Studio 2010/.NET Framework 4.0

How to: Use the CSS Properties Window

The CSS Properties window enables you to view and modify the cascading style sheet (CSS) style properties of an element. You can use the CSS Properties window with an open Web page, an external CSS file, or with the Manage Styles window in order to review and change the properties of existing styles.

In a Web page, the CSS Properties window enables you to see all the styles that are used by the currently selected element. You can also see the order of precedence of those styles, and all the properties and values of those styles. You can use the CSS Properties window in both Source view and Design view.

Note:
In the CSS Properties window, you can right-click a selector under Applied Rules to display a shortcut menu that contains additional options for working with styles for that selector.

An Overview of the CSS Property Window

The CSS Properties window has four main sections, as shown in the following illustration:

The sections are as follows:

Sorting buttons You can use the buttons at the top of the window to sort the list of properties. You can sort the list alphabetically, by category, and by the properties that are set.
Summary button 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 Lists all the styles that affect the element on the page. Styles that are lower in the list have higher precedence over styles that are higher in the list. If you select a style from this list, its properties are listed in the CSS Properties section.
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.

Creating a New Style Using the CSS Properties Window

You can use the CSS Properties window to create a new style for an element that you select in Design view, Source view, or Split view. You can create an inline style or display the New Styles dialog box to create a style on the page or in a CSS style sheet.

The Applied Rules section indicates which style rules are applied to the element. It also indicates whether these rules are inline, in a style sheet, or on the current page. The following procedure explains how to create a new style for an element. If no styles are applied yet, the Applied Styles section shows no rules applied.

To create a new style by using the CSS Properties window

In the designer, select the element that you want to add a style rule to.
In Source view, select the element and include both the opening and closing tags. In Design view, select the element so that the pop-up tag shows the name of the element.
To create an inline style, in the CSS Properties window, right-click anywhere in the Applied Rules section and then click New Inline Style
To add a new style to the page, in the CSS Properties window, right-click anywhere in the Applied Rules section and then click New Style.
In the Applied Rules list, select an element, an element ID, or an element CSS class.
In the CSS Properties section, set the style properties.

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

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.

Concepts

How to: Use the Apply Styles and Manage Styles Windows

How to: Use the Direct Style Application Toolbar