Manage Styles panel

  • Article

You can use the Manage Styles panel to apply, modify, rename, and delete styles; attach or detach external cascading style sheets (CSS); select all instances of a style; and go to the code that contains a style's rule set. You can also use the Manage Styles panel to move styles from an external CSS to an internal CSS and vice versa, or to move the location of a style within in a CSS.

When you open a web page, the Manage Styles panel lists all styles that are defined in the page's external and internal CSS, but not inline CSS. You can set the panel to list all styles or restrict it to list only styles that are used in the current web page or the current selection in the page. All class, element, and ID selectors appear under either the name of the external .css file that contains the style or Current Page if the style is in an internal CSS.

Tip

To temporarily display all of the property declarations of a style in a floating window by your pointer, point to the style in the Manage Styles panel.

Manage Styles panel

Cc295470.c7cb514c-3f8d-46e0-a624-8c82af568ddf(en-us,Expression.40).png

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

An external CSS file linked from the current web page.

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

A list of the class, element, and ID selectors of internal CSS and imported external CSS files, as defined in the Current Page.

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

An external CSS file imported into the current web page.

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

A style defined in the internal CSS in the current web page.

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

By default, the selectors of a style that contains multiple selectors appear grouped. You can list the selectors separately by clicking Options and then clicking Separate Grouped Selectors.

The icons that appear next to each style in the Manage Styles panel identify the style's type and whether the style is used in the current web page.

Manage Styles panel icons

Icon Description
Cc295470.d2d37440-9664-4050-a58e-7fee8ea63242(en-us,Expression.40).png

A red dot appears next to ID selectors.
Cc295470.2374f498-4295-4fe3-be55-7d154c89142a(en-us,Expression.40).png

A green dot appears next to class selectors.
Cc295470.c983e0ca-2bc5-409e-b8fc-834785293639(en-us,Expression.40).png

A blue dot appears next to element selectors.
Cc295470.e67de9f1-9a1a-46ce-8629-06280b678e1b(en-us,Expression.40).png

A circle appears around a colored dot to mark styles that are used in the current web page.
Cc295470.040e2329-921d-46af-9cba-9f280c15d703(en-us,Expression.40).png

An @ symbol appears next to imported external cascading style sheets.

To move a style

  1. In the Manage Styles panel, click Options, and select Categorize By Order.

  2. Do any of the following:

    • To move the location of a style in the CSS, drag the style up or down in the list. For example, you could move the styles that you use most frequently so they conveniently appear adjacent to one another.

    • To move a style from an internal CSS to an external CSS that's attached to the page, drag the style from under Current Page to either the name of the external CSS you want to contain it or to a particular point in the list of styles in the external CSS.

    • To move a style from an external CSS to an internal CSS, 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 doesn't appear, add a set of <style></style> tags between the <head></head> tags of your 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 to contain it or to a particular point in the list of styles in the external CSS.

    Note

    When the Manage Styles panel is set to Categorize By Element or Categorize By Type in the panel Options, you can't move a style to a particular point in the list of styles. With either option, you can only move a style from an external CSS to either another external CSS or internal CSS, or vice versa by dragging the style to the name of the external CSS file or to Current Page (for the internal CSS).

To sort styles in the Manage Styles panel

  • In the Manage Styles panel, click Options, and then do the following:

    Select this To do this

    Categorize By Order

    List styles according to the order they appear in the CSS.

    Categorize By Element

    List styles under the HTML element each style is applied to.

    Categorize By Type

    List styles alphabetically and according to the type of style.

To separately list each selector of styles that contain multiple selectors

  • In the Manage Styles panel, click Options, and then select Separate Grouped Selectors.

To show or hide styles in the Manage Styles panel

  • In the Manage Styles panel, click Options, and then do the following:

    Select this To do this

    Show All Styles

    List all styles that are contained in the external, internal, and inline CSS of the current web page.

    Show Styles Used In Current Page

    List only styles that are used in the current web page.

    Show Styles Used On Selection

    List only styles that are used by the current selection in the page.

To show a preview of a selected style in the Manage Styles panel

  • In the Manage Styles panel, click Options, and then select Display Selected Style Preview.

See also

Reference

Apply Styles panel
CSS Properties panel

Concepts

Using cascading style sheet tools
Cascading style sheet reference
Working with styles

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.