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.
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.
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.
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.
A red dot appears next to ID selectors.
A green dot appears next to class selectors.
A blue dot appears next to element selectors.
A yellow dot appears next to inline styles.
A circle appears around a colored dot to mark styles that are used in the current web page.
An @ symbol appears next to imported external cascading style sheets.
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.
Element selectors and inline styles appear in the Apply Styles panel only when you either place your cursor is in content that uses the style or select content that uses the style.