Apply Styles panel
You can use the Apply Styles panel 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 rule set. The Apply Styles panel 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 visual appearance of the style.
When you open a web page, the Apply Styles panel lists styles that are defined in all of the cascading style sheets (CSS) for the page, 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 underneath the list of class and ID selectors. 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. No matter which of these options you've selected, element selectors and inline selectors appear in the panel 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 panel 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 panel, you can select a color to appear in the panel 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 panel.
Apply Styles panel
.png "Cc295403.7d746eac-1e02-4837-984d-904cf410e301(en-us,Expression.40).png")
|
Clear Styles removes all class selectors and inline styles from the current selection. |
|
External CSS file linked from the current web page. |
|
External CSS file imported into the current web page. |
|
Current Page lists the class and ID selectors of internal CSS and imported external CSS files. |
|
A style defined in the internal CSS in the current web page. |
|
A solid rectangular border appears around styles 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. |
.png "Cc295403.edef891a-6b74-4192-8f7f-5079614b9112(en-us,Expression.40).png")
.png "Cc295403.957413f8-28e0-4dc7-a144-0598679350b9(en-us,Expression.40).png")
.png "Cc295403.13f14333-cc5f-457a-863b-ccd449500941(en-us,Expression.40).png")
.png "Cc295403.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(en-us,Expression.40).png")
.png "Cc295403.9c26150c-cd15-44bb-bf69-ff72093d3d71(en-us,Expression.40).png")
.png "Cc295403.8f73ae30-de6d-49a5-afe3-12a0a84d80a2(en-us,Expression.40).png")
.png "Cc295403.3ca58ea1-12d2-4379-9b89-e415efd03ca4(en-us,Expression.40).png")
.png "Cc295403.0ca213c6-20bb-4cd9-9acd-ebc60a53c6bf(en-us,Expression.40).png")
The icons that appear next to each style in the Apply Styles panel identify the style type and whether the style is used in the current web page.
Apply Styles panel icons
| Icon | Description |
|---|---|
.png "Cc295403.d2d37440-9664-4050-a58e-7fee8ea63242(en-us,Expression.40).png") |
A red dot appears next to ID selectors. |
.png "Cc295403.2374f498-4295-4fe3-be55-7d154c89142a(en-us,Expression.40).png") |
A green dot appears next to class selectors. |
.png "Cc295403.c983e0ca-2bc5-409e-b8fc-834785293639(en-us,Expression.40).png") |
A blue dot appears next to element selectors. |
.png "Cc295403.376aebaa-ab0c-430f-a82d-6f13d6125571(en-us,Expression.40).png") |
A yellow dot appears next to inline styles. |
.png "Cc295403.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. |
.png "Cc295403.040e2329-921d-46af-9cba-9f280c15d703(en-us,Expression.40).png") |
An @ symbol appears next to imported external cascading style sheets. |
To sort the list of styles in the Apply Styles panel
In the Apply Styles panel, 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 panel
In the Apply Styles panel, 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 panel only when you either place your cursor in content that uses the style or select content that uses the style.
To display a colored background in the Apply Styles panel behind styles that don't contain a background property rule
In the Apply Styles panel, click Options, and then select Preview Background Color.
In the More Colors dialog box, select a color, and then click OK.
See also
Tasks
Reference
Manage 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.