Use the Apply Styles task pane

With the Apply Styles task pane, you can apply, remove, 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. The Apply Styles task pane displays each style according to the rules of the style, so you can quickly identify the style you want to work with just by looking at the style's visual appearance.

In this article


About the Apply Styles task pane

When you open a Web page, the Apply Styles task pane lists styles that are defined in all of the page's cascading style sheets, including external, inline, and internal CSS. Class-based and id-based styles 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. Element-based styles are organized the same way but appear under a separate heading named Contextual Selectors below the list of class-based and id-based styles. 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. No matter which of these options you've selected, element-based styles and inline styles appear in the task pane only when you either place your cursor in content that uses the style or select content that uses the style.

Both the Apply Styles and Manage Styles task panes use the structure of the rendered page to determine style references. This means that the Apply Styles and Manage Styles task panes treat a master page and its content page as a single collapsed page. For example, if you open a content page and then select Show Styles Used In Current Page on the Options button, the Apply Styles displays all styles used on both that content page and the master page to which it is attached. This is because the content page and master page are merged to create the page that is rendered in the browser.

You can sort the list of styles that appear in the Apply Styles task pane and also restrict the list to show only styles that are used in the current Web page or on the current selection. If a particular style is difficult to see against the white background of the task pane, you can select a color to appear in the task pane behind styles that don't contain a background property.

 Tip   To temporarily display all of the rules of a style in a ScreenTip, point to the style in the Apply Styles task pane.

Apply Styles task pane

Callout 1 Clear Styles removes all class-based and inline styles from the current selection.
Callout 2 Current Page lists the class-based and id-based styles of internal CSS and imported external CSS files.
Callout 3 External CSS file imported into the current Web page.
Callout 4 A style defined in the internal CSS in the current Web page.
Callout 5 External CSS file linked from the current Web page.
Callout 6 A solid rectangular border appears around styles that are used by the current selection.
Callout 7 Contextual Selectors lists element-based styles that are used by the current selection.
Callout 8 Class-based and id-based styles contained in the linked external CSS file (events.css).
Callout 9 Each style has a drop-down menu for performing many style-related tasks. Point to a style and click the arrow or right-click a style.

Top of Page Top of Page

About the symbols in the Apply Styles task pane

The symbols that appear next to each style in the Apply Styles task pane identify the style's type and whether the style is used in the current Web page.

Symbol Description
Red dot that appears next to id-based styles A red dot appears next to id-based styles.
Green dot that appears next to class-based styles A green dot appears next to class-based styles.
Blue dot that appears next to element-based styles A blue dot appears next to element-based styles.
Yellow dot appears next to inline styles A yellow dot appears next to inline styles.
Green dot that appears next to used styles A circle appears around a colored dot to mark styles that are used in the current Web page.
@ symbol appears next to imported CSS An @ symbol appears next to imported external cascading style sheets.

Top of Page Top of Page

Sort the list of styles in the Apply Styles task pane

  • In the Apply Styles task pane, click Options, and then do one of the following:
    • To list the styles according to the order the styles appear in the CSS, select Categorize By Order.
    • To list the styles alphabetically and according to the type of style (class-based or id-based), select Categorize By Type.

Top of Page Top of Page

Show or hide styles in the Apply Styles task pane

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

 Note   Element-based styles and inline styles appear in the Apply Styles task pane only when you either place your cursor is in content that uses the style or select content that uses the style.

Top of Page Top of Page

Display a colored background in the Apply Styles task pane behind styles that don't contain a background property rule

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

Top of Page Top of Page

 
 
Applies to:
SharePoint Designer 2007