Export (0) Print
Expand All

Manage Styles task pane

The Manage Styles task pane enables you 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 task pane 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 task pane lists all styles that are defined in the page's external and internal cascading style sheets (CSS), but not inline CSS. You can set the task pane 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.

Cc295470.alert_tip(en-us,Expression.10).gifTip:

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 task pane.

Manage Styles task pane

Cc295470.43e2a2bf-87b3-49a4-ac55-1211d2fbb028(en-us,Expression.10).bmp
  1. Current Page lists the class, element, and ID selectors of internal CSS and imported external CSS files.

  2. An external CSS file imported into the current web page.

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

  4. An external CSS file linked from the current web page.

  5. 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 task pane identify the style's type and whether the style is used in the current web page.

Manage Styles task pane icons

Icon

Description

Cc295470.f2c9dfa3-9c53-430c-be02-21d79e4d1d12(en-us,Expression.10).gif

A red dot appears next to ID selectors.

Cc295470.93ed2242-d3a9-4228-8e01-b114ce38a04c(en-us,Expression.10).gif

A green dot appears next to class selectors.

Cc295470.38197e93-e248-4637-82ab-d582c3a519ce(en-us,Expression.10).gif

A blue dot appears next to element selectors.

Cc295470.69a199aa-4b7a-4713-ba75-2837bdcfa759(en-us,Expression.10).gif

A circle appears around a colored dot to mark styles that are used in the current web page.

Cc295470.268c399c-96bb-47aa-931a-d00a4203b3b4(en-us,Expression.10).gif

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

To move a style

  1. In the Manage Styles task pane, 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.

    Cc295470.alert_note(en-us,Expression.10).gifNote:

    When the Manage Styles task pane is set to Categorize By Element or Categorize By Type in the task pane 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 task pane

  • In the Manage Styles task pane, 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 task pane, click Options, and then select Separate Grouped Selectors.

To show or hide styles in the Manage Styles task pane

  • In the Manage Styles task pane, 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 task pane

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

Community Additions

ADD
Show:
© 2014 Microsoft