How to: Use the Apply Styles and Manage Styles Windows

How to: Use the Apply Styles and Ma...

Updated: November 2007

The Apply Styles and Manage Styles windows enable you to apply, modify, rename, and delete styles. You can also attach or detach external cascading style sheets (CSS), select all instances of a style, and locate the code that contains a style's rule set.

Each window has specific uses. Use the Apply Styles window to apply a single style or multiple styles to a page element. The Apply Styles window displays each style according to the rules of the style. Therefore, you can quickly identify the style that you want to work with just by looking at the style's appearance in the window.

Use the Manage Styles window to change the location or order of styles. You can move styles from an external CSS to an internal CSS and vice versa, or you can move the location of a style within a style sheet or style block.

Both tools use icons to indicate how the style is defined. The following table shows and describes each icon.

Icon	Description
	A red dot indicates an ID-based style.
	A green dot indicates a class-based style.
	A blue dot indicates an element-based style.
	A yellow dot indicates an inline style.
	A circle around a dot indicates that the style is used on the current page.
	An at sign (@) indicates an imported external cascading style sheet.

Working with the Apply Styles Window

The Apply Styles window lists all CSS style rules that are defined for a page. This includes style rules that are defined in external style sheets, as inline styles, and as styles defined in the page. Class-based and ID-based style rules appear under the name of the external .css file that contains the style. If the style rule is defined in the page, it appears under Current Page. Element-based style rules are organized the same way, but they appear under a separate heading titled Contextual Selectors.

You can set the window to list all style rules. Alternatively, you can restrict the list to only style rules that are used in the current Web page or in the current selection in the page. Regardless of which of these options that you select, element-based style rules and inline style rules appear in the window only under two conditions. One condition is when you hold the mouse pointer over page elements that use the style, and the other condition is when you select content that uses the style.

You can also sort the list of styles that appear in the Apply Styles window.

If a particular style is difficult to see against the background of the window, you can select a color to appear in the window behind styles that do not contain a background property.

Note:
To temporarily display all the rules of a style in a pop-up window, hold the mouse pointer over the style in the Apply Styles window.

An Overview of the Apply Styles Window

The user interface of the Apply Styles window has the following features:

New Style, which provides access to the Styles dialog box.
Attach Style Sheet, which lets you select a style sheet to attach to the current page.
Clear Styles, which removes all class-based and inline style rules from the current selection.
Current Page, which lists the class-based and ID-based style rules in the current page and imported external CSS files.
An external CSS file, indicated by the at sign (@), which shows all style rules that are imported into the current Web page.
An external CSS file, which is linked from the current Web page and is displayed as a separate section.
A solid rectangular border around a style, which indicates that it is used by the current selection.
Contextual Selectors, which lists element-based style rules that are used by the current selection.
Inline Style, which shows the style rules that are applied to the selected inline element.
A shortcut menu for each style rule, which enables you to perform many style-related tasks.

Using the Apply Styles Window

The Apply Styles window enables you to quickly apply a single style or multiple styles to a page element.

To apply styles to a page element by using the Apply Styles window

To display the Apply Styles window, in the Format menu, click CSS Styles, and then click Apply Styles.
In a Web page, in Design view or Source view, select the element that you want to apply a style to, and then do one of the following in the Apply Styles window:
- To apply a single existing style rule, click the class or ID style that you want to apply.
- To apply multiple existing style rules, press the CTRL key while you click each style that you want to apply.

You can change the order of styles, change what styles appear, and customize the window to show what you want.

To sort the styles by using the Apply Styles window

In the Apply Styles window, click Options, and then do one of the following:
- To list the style rules in the order in which they appear on the CSS, click Categorize By Order.
- To list the styles alphabetically and by the type of style (class-based or ID-based), click Categorize By Type.

You can show or hide style rules in the Apply Styles window. Element-based styles and inline style rules appear in the Apply Styles window only when you either hold the mouse pointer over content that uses the style, or when you select content that uses the style.

To show or hide styles by using the Apply Styles window

In the Apply Styles window, click Options, and then do one of the following:
- To list all style rules that are contained in the external, internal, and inline CSS of the current Web page, click Show All Styles.
- To list only style rules that are used in the current Web page, click Show Styles Used In Current Page.
- To list only style rules that are used by the current selection in the Web page, click Show Styles Used On Selection.

If a style rule does not have a background color, you can apply a color that makes it easier to see the style name in the Apply Styles window. If the style has a background style rule, the background is shown with the style.

To display a color background in the Apply Style window

In the Apply Styles window, click Options, and then click Preview Background Color.
In the More Colors dialog box, select a color, and then click OK.

Working with the Manage Styles Window

The Manage Styles window lists all style rules that are defined in the page's external cascading style sheet (CSS). It also lists style rules that are defined in the page, but not as inline styles. You can use the Manage Styles window to move styles from an external style sheet to the style element on the page and vice versa. You can also use the window to move the location of a style within the set of CSS style rules.

You can set the window to list all style rules or restrict it to list only style rules that are used in the current Web page or in the current selection in the page. All class-based, element-based, and ID-based style rules appear under the name of the external .css file that contains the style rule. If the style rule is on the current page, it appears under Current Page.

Note:
To temporarily display all the rules of a style in a pop-up window, hold the mouse pointer over the style in the Apply Styles window.

An Overview of the Manage Styles Window

The user interface of the Manage Styles window has the following features:

New Style, which provides access to the Styles dialog box.
Attach Style Sheet, which enables you to select a style sheet to attach to the current page.
Current Page, which lists the class-based and ID-based style rules in the current page and in any imported external CSS files.
A tab for any external .css file that is linked from the current Web page.
Default selector grouping, which shows the selectors of any style that contains multiple selectors in a group. You can list the selectors separately by clicking Options and then clicking Separate Grouped Selectors.

To show a preview of a selected style in the Manage Styles window, click Options, and then click Display Selected Style Preview.

Using the Manage Styles Window

You can change the order of styles and customize the window to show what you want. If you move a style up or down in the list, it also moves the style in the style sheet. This change can affect how style properties cascade. For example, if a property attribute is set in two different styles, the last style will take precedence.

Note:
When the Manage Styles window is set to Categorize By Element or Categorize By Type, you cannot move a style to a particular point in the list of styles. In either case, you can only move a style from an external CSS to another external CSS or onto the page or vice versa by dragging the style to the name of the external CSS file or to Current Page.

To move a style by using the Manage Styles window

To display the Manage Styles window, in the Format menu, click CSS Styles, and the click Manage Styles.
In the Manage Styles window, click Options, click Categorize By Order, and then do the following:
- To move the location of a style in the CSS, drag the style up or down in the list. For example, you can move the styles that you use most frequently so that they conveniently appear adjacent to each other.
- To move a style from a page to an external CSS that is attached to the page, drag the style from under Current Page to either the name of the external CSS, or to a particular point in the list of styles in the external CSS.
- To move a style from an external CSS to a page, drag the style from under the name of the external CSS to either Current Page, or to a particular point in the list of styles under Current Page. If Current Page does not appear, add a style element inside the head element of the Web page.
- To move a style from an external CSS to a different external CSS, drag the style to either the name of the external CSS you want or to a particular point in the list of styles in the external CSS.

Although the Manage Styles window is best used for managing styles, you can also use it to apply a style to a page element.

To apply a style by using the Manage Styles window

In a Web page, in Design view or Source view, select the element that you want to apply a style to.
Right-click the class or ID style that you want to apply, and in the shortcut menu, click Apply Style.

You can also sort styles by using choices under the Options button.

To sort styles by using the Manage Styles window

In the Manage Styles window, click Options, and then do one of the following:
- Click Categorize By Order to list styles according to the order that they appear in the CSS.
- Click Categorize By Element to list styles under the HTML element that each style is applied to.
- Click Categorize By Type to list styles alphabetically and according to the type of style.

You can separate styles that are grouped to make them easier to work with.

To separately list each selector of styles that contain multiple selectors

In the Manage Styles window, click Options, and then click Separate Grouped Selectors.

You can also specify which styles to show in the Manage Styles window.

To show or hide styles in the Manage Styles window

In the Manage Styles window, click Options, click Categorize By Order, and then do the following:
- Click Show All Styles to list all styles that are contained in external style sheets, are on the page, and are inline style rules of the current page.
- Click Show Styles Used In Current Page to list only styles that are used in the current page.
- Click Show Styles Used On Selection to list only styles that are used by the current selection in the page.