Apply Styles task pane
The Apply Styles task pane enables you to 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.
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 (CSS), including external, inline, and internal CSS. Class 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. Element selectors are organized the same way but appear under a separate heading named Contextual Selectors below the list of class and ID selectors. 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 selectors and inline selectors 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.
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 floating window by your pointer, point to the style in the Apply Styles task pane.
Apply Styles task pane
.bmp "Cc295403.101cc829-ecf8-4ef8-aeb3-4b8e52171b01(en-us,Expression.10).bmp")
Clear Styles removes all class selectors and inline styles from the current selection.
Current Page lists the class and ID selectors of internal CSS and imported external CSS files.
External CSS file imported into the current web page.
A style defined in the internal CSS in the current web page.
External CSS file linked from the current web page.
A solid rectangular border appears around styles that are used by the current selection.
Contextual Selectors lists element selectors that are used by the current selection.
Class and ID selectors contained in the linked external CSS file (events.css).
Each style has a drop-down menu for performing many style-related tasks. Point at a style and click the arrow or right-click a style.
The icons 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.
Apply Styles task pane icons
Icon |
Description |
|---|---|
.gif "Cc295403.f2c9dfa3-9c53-430c-be02-21d79e4d1d12(en-us,Expression.10).gif") |
A red dot appears next to ID selectors. |
.gif "Cc295403.93ed2242-d3a9-4228-8e01-b114ce38a04c(en-us,Expression.10).gif") |
A green dot appears next to class selectors. |
.gif "Cc295403.38197e93-e248-4637-82ab-d582c3a519ce(en-us,Expression.10).gif") |
A blue dot appears next to element selectors. |
.gif "Cc295403.e8b2c77d-6e50-4e5c-ba77-f054834ef609(en-us,Expression.10).gif") |
A yellow dot appears next to inline styles. |
.gif "Cc295403.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. |
.gif "Cc295403.268c399c-96bb-47aa-931a-d00a4203b3b4(en-us,Expression.10).gif") |
An @ symbol appears next to imported external cascading style sheets. |
Procedures
To sort the list of styles in the Apply Styles task pane
In the Apply Styles task pane, click Options, and 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 or ID selectors), select Categorize By Type.
To show or hide styles in the Apply Styles task pane
In the Apply Styles task pane, click Options, and 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 selectors 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.
To display a colored background in the Apply Styles task pane behind styles that don't contain a background property rule
In the Apply Styles task pane, click Options, and then select Preview Background Color.
In the More Colors dialog box, select a color, and then click OK.