reference.md

title	CSS features reference
description	Features for viewing and changing CSS rules in Microsoft Edge DevTools.
author	MSEdgeTeam
ms.author	msedgedevrel
ms.topic	conceptual
ms.prod	microsoft-edge
ms.date	10/29/2021

CSS features reference

Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.

To learn the basics, see Get started viewing and changing CSS.

Select an element

The Elements tool in DevTools lets you view or change the CSS of one element at a time. The selected element is highlighted in the DOM Tree. The styles of the element are shown in the Styles pane. For a tutorial, see View the CSS for an element.

In the following figure, the h1 element that is highlighted in the DOM Tree is the selected element. On the right, the styles of the element are shown in the Styles pane. On the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the DOM Tree:

There are many ways to select an element:

• In a rendered webpage, right-click a page element, and then click Inspect.

• In DevTools, click Select an element () or press Ctrl+Shift+C (Windows, Linux) or Command+Shift+C (macOS), and then click the element in the viewport.

• In DevTools, click the element in the DOM Tree.

• In DevTools, run a query such as document.querySelector('p') in the Console, right-click the result, and then select Reveal in Elements panel.

View the external stylesheet where a rule is defined

In the Styles pane, click the link next to a CSS rule to open the external stylesheet that defines the rule. The stylesheet opens in the Editor pane of the Sources tool.

If the stylesheet is minified, click the Format () button, at the bottom of the Editor pane. For more information, see Reformat a minified JavaScript file with pretty-print.

In the following figure, after you click https://docs.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 you are taken to line 2 of https://docs.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css, where the .content h1:first-of-type CSS rule is defined.

View only the CSS that is actually applied to an element

The Styles panel shows you all of the rules that apply to an element, including declarations that have been overridden. When you aren't interested in overridden declarations, use the Computed panel to view only the CSS that is actually being applied to an element.

1. Select an element.

2. Go to the Computed panel in the Elements tool.

   On a wide DevTools window, the Computed panel doesn't exist. The contents of the Computed panel are shown on the Styles panel.

   Inherited properties are opaque.

3. To display all inherited values, select the Show All checkbox.

   In the following figure, the Computed panel shows the CSS properties being applied to the currently selected h1 element:

   

View CSS properties in alphabetical order

Use the Computed panel. See View only the CSS that is actually applied to an element.

View inherited CSS properties

Check the Show All checkbox in the Computed panel. See View only the CSS that is actually applied to an element.

View an element's box model

To view the box model of an element, go to the Styles panel. If your DevTools window is narrow, the Box Model diagram is at the bottom of the panel.

To change a value, double-click it.

In the following figure, the Box Model diagram in the Styles panel shows the box model for the currently selected h1 element.

Search and filter the CSS of an element

Use the Filter text box on the Styles and Computed panels to search for specific CSS properties or values.

To also search inherited properties in the Computed panel, check the Show All checkbox.

In the following figure, the Styles panel is filtered to only show rules that include the search query color.

In the following figure, the Computed panel is filtered to only show declarations that include the search query 100%.

Toggle a pseudo-class

To toggle a pseudo-class, such as :active, :focus, :hover, or :visited:

1. Select an element.

2. On the Elements tool, go to the Styles tab.

3. Click :hov.

4. Select the pseudo-class that you want to enable.

   The following figure shows toggling the :hover pseudo-class. In the viewport, the background-color: cornflowerblue declaration is applied to the element, even though the element isn't actually being hovered over.

   

For an interactive tutorial, see Add a pseudo-state to a class.

View a page in print mode

To view a page in print mode:

1. Open the Command Menu.

2. Start typing rendering, and then select Show Rendering.

3. Click the Emulate CSS Media dropdown list, and then select print.

View used and unused CSS with the Coverage tool

The Coverage tool shows you what CSS a page actually uses.

1. Open the Command Menu by pressing Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS), while DevTools has focus.

2. Start typing coverage, and then select Show Coverage. The Coverage tool appears.

   Opening the Coverage tab from the Command Menu:

   

   The Coverage tab:

   

3. Click Start instrumenting coverage and refresh the page (). The page refreshes and the Coverage tab provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads. Green represents used CSS. Red represents unused CSS.

   An overview of how much CSS (and JavaScript) is used and unused:

   

4. To display a line-by-line breakdown of what CSS is used, click a CSS file.

   In the following figure, lines 145 to 147 and 149 to 151 of b66bc881.site-ltr.css are unused, whereas lines 163 to 166 are used:

   

Force print preview mode

See Force DevTools into Print Preview mode.

Two ways to add a CSS declaration to an element

The order of declarations affects how an element is styled. You can add declarations either by adding an inline declaration, or by adding a declaration to a style rule. These two approaches are described in the following sections.

Adding an inline CSS declaration to an element

Adding a inline declaration is equivalent to adding a style attribute to the HTML of an element. For most scenarios, you probably want to use inline declarations.

Inline declarations have higher specificity than external declarations, so using inline declarations ensures that the changes take effect in your specific, expected element. For more information about specificity, see Selector Types.

To add an inline declaration:

1. Select an element.

2. In the Styles pane, click between the brackets of the element.style section. The cursor focuses, allowing you to enter text.

3. Enter a property name and press Enter.

4. Enter a valid value for that property and press Enter. In the DOM Tree, a style attribute has been added to the element.

In the following figure, the margin-top and background-color properties have been applied to the selected element. In the DOM Tree, the declarations are reflected in the element's style attribute.

Adding a CSS declaration to an existing style rule

If you're debugging an element's styles and you need to specifically test what happens when a declaration is defined in different places, add a declaration to an existing style rule.

To add a declaration to an existing style rule:

1. Select an element.

2. In the Styles pane, click between the brackets of the style rule to which you want to add the declaration. The cursor focuses, allowing you to enter text.

3. Enter a property name and press Enter.

4. Enter a valid value for that property and press Enter.

Change a declaration name or value

Double-click a declaration's name or value to change it. See Change declaration values with keyboard shortcuts for shortcuts for quickly incrementing or decrementing a value by 0.1, 1, 10, or 100 units.

Change declaration values with keyboard shortcuts

While editing the value of a declaration, you can use the following keyboard shortcuts to increment the value by a specific amount:

Keyboard shortcut	Increments by
Alt+Up (Windows, Linux) or Option+Up (macOS)	0.1
Up	1 (or 0.1, if the current value is between -1 and 1)
Shift+Up	10
Shift+Page Up (Windows, Linux) or Shift+Command+Up (macOS)	100

To decrement, press the Down key instead of the Up key.

Add a class to an element

To add a class to an element:

1. Select the element in the DOM Tree.

2. Click .cls.

3. Enter the name of the class in the Add New Class text box.

4. Press Enter.

   

Toggle a class

To enable or disable a class on an element:

1. Select the element in the DOM Tree.

2. Open the Element Classes pane. See Add a class to an element. Below the Add New Class text boxes are all of the classes that are being applied to this element.

3. Toggle the checkbox next to the class that you want to enable or disable.

Add a style rule

To add a new style rule:

1. Select an element.

2. Click New Style Rule (). DevTools inserts a new rule beneath the element.style rule.

   In the following figure, DevTools adds the h1.devsite-page-title style rule after you click New Style Rule.

   

Select a stylesheet to add a rule to

When adding a new style rule, to select a stylesheet to add a rule to:

• Click and hold New Style Rule () to select a stylesheet to add the style rule to.

Add a style rule to a specific location

To add a style rule to a specific location in the Styles panel:

1. Hover on the style rule that is directly above where you want to add your new style rule.

2. Reveal the More Actions toolbar.

3. Select Insert Style Rule Below ().

Reveal the More Actions toolbar

Use the More Actions toolbar to:

• Insert a style rule directly below the one you are focused on.

• Add a background-color, color, box-shadow, or text-shadow declaration to the style rule you are focused on.

To reveal the More Actions toolbar:

1. In the Styles panel, hover on a style rule. More Actions (...) is revealed in the bottom-right of the style rule section.

   In the following figure, hover on the .header-holder.has-default-focus style rule and More Actions is revealed in the bottom-right of the style rule section.

   

2. Hover on More Actions (...) to reveal the actions mentioned above.

   The Insert Style Rule Below action is revealed after hovering over More Actions.

   

Add a background-color declaration

To add a background-color declaration to an element:

1. Hover on the style rule that you want to add the background-color declaration to.

2. Reveal the More Actions toolbar.

3. Click Add Background Color ().

Add a color declaration

To add a color declaration to an element:

1. Hover on the style rule that you want to add the color declaration to.

2. Reveal the More Actions toolbar.

3. Click Add Color ().

   

Add a box-shadow declaration

To add a box-shadow declaration to an element:

1. Hover on the style rule that you want to add the box-shadow declaration to.

2. Reveal the More Actions toolbar.

3. Click Add Box Shadow ().

   

Add a text-shadow declaration

To add a text-shadow declaration to an element:

1. Hover on the style rule that you want to add the text-shadow declaration to.

2. Reveal the More Actions toolbar.

3. Click Add Text Shadow ().

   

Toggle a declaration

To toggle a single declaration on or off:

1. Select an element.

2. In the Styles pane, hover on the rule that defines the declaration. A checkbox appears next to each declaration.

3. Select or clear the checkbox next to the declaration. When you clear a declaration, DevTools crosses it out, to indicate that it is no longer active.

   In the following figure, the margin-top property for the currently selected element has been toggled off.

   

Change colors with the Color Picker

The Color Picker provides a GUI for changing color and background-color declarations.

To open the Color Picker:

1. Select an element.

2. In the Styles panel, find the color, background-color, or similar declaration that you want to change. To the left of the color, background-color, or similar value, there is a small square, which is a preview of the color.

   In the following figure, the small square to the left of rgba(0, 0, 0, 0.7) is a preview of that color.

   

3. Click the preview to open the Color Picker.

   

The following figure and list describes of each of the UI elements of the Color Picker.

Callout	Component	Description
1	Shades
2	Eyedropper	Sample a color off the page with the Eyedropper
3	Copy To Clipboard	Copy the Display Value to your clipboard.
4	Display Value	The RGBA, HSLA, or Hex representation of the color.
5	Color Palette	Click a square to change the color.
6	Hue
7	Opacity
8	Display Value Switcher	Toggle between the RGBA, HSLA, and Hex representations of the current color.
9	Color Palette Switcher	Toggle between the Material Design palette, a custom palette, or a page colors palette. DevTools generates the page color palette based on the colors that it finds in your stylesheets.

Sample a color off the page with the Eyedropper

To change the selected color to some other color on the page:

1. Click the Eyedropper icon (). Your cursor changes to a magnifying glass.

2. Hover on the pixel that has the color you want to sample, anywhere on your screen.

3. Click to confirm.

   In the following figure, the Color Picker shows a current color value of rgba(0,0,0,0.7), which is close to black. The specific color changes to the version of black that is currently highlighted in the viewport after you clicked it.

   

See also:

• Test text-color contrast using the Color Picker

Change angle value with the Angle Clock

The Angle Clock provides a GUI for changing the angle amounts in CSS property values.

To open the Angle Clock:

1. Select an element which includes an angle declaration.

2. In the Styles tab, find the transform or background declaration that you want to change. Click the Angle Preview box next to the angle value.

   In the following figure, the small clock to the left of 100deg is a preview of the angle.

3. Click the preview to open the Angle Clock:

   

4. Change the angle value by clicking on the Angle Clock circle, or scroll your mouse to increase or decrease the angle value by 1.

There are more keyboard shortcuts to change the angle value. Find out more in the Styles pane keyboard shortcuts.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

This work is licensed under a Creative Commons Attribution 4.0 International License.