Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Discover new workflows in this comprehensive reference of Chrome DevTools features related toviewing and changing CSS.

SeeView and change CSS to learn the basics.

Select an element

TheElements panel of DevTools lets you view or change the CSS of one element at a time.

On the screenshot, theh1 element that's highlighted blue in theDOM Tree is the selected element.To the right, the element's styles are shown in theStyles tab. To the left, the element ishighlighted in the viewport, but only because the mouse is hovering over it in theDOMTree.

SeeView an element's CSS for a tutorial.

There are many ways to select an element:

• In your viewport, right-click the element and selectInspect.
• In DevTools, clickSelect an elementor pressCommand+Shift+C (Mac) orControl+Shift+C (Windows, Linux), and then click the element inthe viewport.
• In DevTools, click the element in theDOM Tree.
• In DevTools, run a query likedocument.querySelector('p') in theConsole, right-click theresult, and then selectReveal in Elements panel.

View CSS

Use theElements >Styles andComputed tabs to view CSS rules anddiagnose CSS issues.

Navigate with links

TheStyles tab displays links in various places to various other places, including but not limited to:

• Next to CSS rules, to style sheets and CSS sources. Such links open theSources panel. If the style sheet is minified, seeMake a minified file readable.
• In theInherited from ... sections, to parent elements.
• Invar() calls, tocustom property declarations.
• Inanimation shorthand properties, to@keyframes.
• Learn more links in documentation tooltips.
• And more.

Here are some of them highlighted:

Links may be styled differently. If you're not sure if something is a link, try clicking it to find out.

View tooltips with CSS documentation, specificity, and custom property values

Elements >Styles shows tooltips with useful information when you hover over specific elements.

View CSS documentation

To see a tooltip with a short CSS description, hover over the property name in theStyles tab.

ClickLearn more to go to anMDN CSS Reference on this property.

To turn the tooltips off, checkDon't show.

To turn them back on, checkSettings >Preferences >Elements >Show CSS documentation tooltip.

View selector specificity

Hover over a selector to see a tooltip with itsspecificity weight.

View the values of custom properties

Hover over a--custom-property to see its value in a tooltip.

View invalid, overridden, inactive, and other CSS

TheStyles tab recognizes many kinds of CSS issues and highlights them in different ways.

SeeUnderstand CSS in the Styles tab.

View only the CSS that's actually applied to an element

TheStyles tab shows you all of the rules that apply to an element, including declarations thathave been overridden. When you're not interested in overridden declarations, use theComputedtab to view only the CSS that's actually being applied to an element.

1. Select an element.
2. Go to theComputed tab in theElements panel.

Check theShow All checkbox to see all properties.

SeeUnderstand CSS in the Computed tab.

View CSS properties in alphabetical order

Use theComputed tab. SeeView only the CSS that's actually applied to an element.

View inherited CSS properties

Check theShow All checkbox in theComputed tab. SeeView only the CSS that's actuallyapplied to an element.

Alternatively, scroll theStyles tab and find sections namedInherited from <element_name>.

View CSS at-rules

At-rules are CSS statements that let you control CSS behavior.Elements >Styles shows the following at-rules in dedicated sections:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

View@property at-rules

The@property CSS at-rule lets you defineCSS custom properties explicitly and register them in a style sheet without running any JavaScript.

Hover over the name of such property in theStyles tab, to see a tooltip with the property's value, descriptors, and a link to its registration in the collapsible@property section at the bottom of theStyles tab.

To edit an@property rule,double-click its name or value.

View@supports at-rules

TheStyles tab shows you the@supports CSS at-rules if they are applied to an element. For example, inspect the following element:

If your browser supports thelab() function, the element is green, otherwise it's purple.

View@scope at-rules

TheStyles tab shows youCSS@scope at-rules if they are applied to an element.

The new@scope at-rules are a part of theCSS Cascading and Inheritance Level 6 specification. These rules allow you to scope CSS styles, in other words, explicitly apply styles to specific elements.

1. Inspect the text on the card in the preview.
2. On theStyles tab, find the@scope rule.

In this example, the@scope rule overrides the global CSSbackground-color declaration for all<p> elements inside elements with acard class.

To edit the@scope rule, double-click it.

View@font-palette-values at-rules

The@font-palette-values CSS at-rule lets you customize the default values of thefont-palette property.Elements >Styles shows this at-rule in a dedicated section.

View the@font-palette-values section in the next preview:

1. Inspect the second line of text in the preview.
2. InStyles, find the@font-palette-values section.

In this example, the--New font palette values override the default ones of the colored font.

To edit your custom values, double-click them.

View@position-try at-rules

The@position-try CSS rule along with theposition-try-options property lets you define alternative anchor positions for elements. To learn more, seeIntroducing the CSS anchor positioning API.

Elements >Styles resolves and links the following:

• position-try-options property values to a dedicated@position-try--name section.
• position-anchor property values andanchor() arguments to the corresponding elements withpopovertarget attributes.

Inspect theposition-try-options values and@position-try sections in the next preview:

1. In the preview, open the submenu, that is, clickYOUR ACCOUNT thenSTOREFRONT.
2. Inspect the element withid="submenu" in the preview.
3. InStyles, find theposition-try-options property and click its--bottom value. TheStyles tab takes you to the corresponding@position-try section.
4. Click theposition-anchor value link or the sameanchor() arguments. TheElements panel selects the element with the correspondingpopovertarget attribute and theStyles tab shows the element's CSS.

To edit values, double-click them.

View an element's box model

To viewthe box model of an element, go to theStyles tab and click theShow sidebar button in the action bar.

To change a value, double-click on it.

Search and filter an element's CSS

Use theFilter box on theStyles andComputed tabs to search for specific CSSproperties or values.

To also search inherited properties in theComputed tab, check theShow All checkbox.

To navigate theComputed tab, group the filtered properties in collapsible categories by checkingGroup.

Emulate a focused page

If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. Thecheck_boxEmulate a focused page option lets you debug such an element as if it is in focus.

Try emulating a focused page on thisdemo page:

1. Focus the input element. Another element appears under it.
2. Open DevTools. The DevTools window is now in focus instead of the page, so the element disappears again.
3. InElements >Styles, click:hov, checkcheck_boxEmulate a focused page, and make sure the inputelement is selected. You can now inspect the element under it.

You can also findthe same option on theRendering panel.

To discover more ways to freeze an element, seeFreeze screen and inspect disappearing elements.

Toggle a pseudo-class

To toggle a pseudo-class:

1. Select an element.
2. On theElements panel, go to theStyles tab.
3. Click:hov.
4. Check the pseudo-class that you want to turn on.

In this example, you can see that DevTools applies thebackground-color declaration to the element, even though the element is not actually hovered over.

TheStyles tab shows the following pseudo-classes for all elements:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Additionally, some elements may have their own pseudo-classes. When you select such an element, theStyles tab shows aForce specific element state section that you can expand and turn on pseudo-classes specific to the element.

SeeAdd a pseudostate to a class for an interactive tutorial.

View inherited highlight pseudo-elements

Pseudo-elements let you style specific parts of elements. Highlight pseudo-elements are document portions with a "selected" status and they are styled as "highlighted" to indicate this status to the user. For example, such pseudo-elements are::selection,::spelling-error,::grammar-error, and::highlight.

As mentioned in thespecification, when multiple styles conflict, cascade determines the winning style.

1. Inspect the text below.

   I inherited the style of my parent's highlight pseudo-element. Select me!

2. Select a portion of the text above.

3. In theStyles tab, scroll down to find theInherited from ::selection pseudo of... section.

View cascade layers

Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is useful for large codebases, design systems, and when managing third-party styles in applications.

To view cascade layers,inspect the next element and openElements >Styles.

In theStyles tab, view the 3 cascade layers and their styles:page,component andbase.

To view the layer order, click the layer name or theToggle CSS layers view button.

Thepage layer has the highest specificity, therefore the element's background is green.

View a page in print mode

To view a page in print mode:

1. Open theCommand Menu.
2. Start typingRendering and selectShow Rendering.
3. For theEmulate CSS Media drop-down, selectprint.

View used and unused CSS with the Coverage tab

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

1. PressCommand+Shift+P (Mac) orControl+Shift+P (Windows, Linux, ChromeOS) while DevTools isin focus to open the Command Menu.

2. Start typingcoverage.

   

3. SelectShow Coverage. The Coverage tab appears.

   

4. ClickReload.The page reloads and theCoverage tab provides an overview of how much CSS (and JavaScript) isused from each file that the browser loads.

   

   Green represents used CSS. Red represents unused CSS.

5. Click a CSS file to see a line-by-line breakdown of what CSS it uses in the preview above.

   

   On the screenshot, lines 55 to 57 and 65 to 67 ofdevsite-google-blue.css are unused, whereas lines 59 to 63 are used.

Force print preview mode

SeeForce DevTools Into Print Preview Mode.

Copy CSS

From a single drop-down menu in theStyles tab, you can copy separateCSS rules, declarations, properties, values

Additionally, you can copy CSS properties in JavaScript syntax. This option is handy if you're usingCSS-in-JS libraries.

To copy CSS:

1. Select an element.
2. In theElements >Styles tab, right-click a CSS property.

3. Select one of the following options from the drop-down menu:

   • Copy declaration. Copies the property and its value in CSS syntax:cssproperty: value;
   • Copy property. Copies only theproperty name.
   • Copy value. Copies only thevalue.
   • Copy rule. Copies the entire CSS rule:cssselector[, selector] { property: value; property: value; ...}
   • Copy declaration as JS. Copies the property and its value in JavaScript syntax:jspropertyInCamelCase: 'value'
   • Copy all declarations. Copies all properties and their values in the CSS rule:cssproperty: value;property: value;...

   • Copy all declarations as JS. Copies all properties and their values in JavaScript syntax:```jspropertyInCamelCase: 'value',propertyInCamelCase: 'value',...

   • Copy all CSS changes.Copies the changes you make in theStyles tab across all declarations.

   • View computed value. Takes you to theComputed tab.

Change CSS

This section lists all the ways you can change CSS inElements >Styles.

Additionally, you can:

• Override CSS across page loads.
• Save modified CSS to your local sources in a workspace.

Add a CSS declaration to an element

Since the order of declarations affects how an element is styled, you can add declarations indifferent ways:

• Add a inline declaration. Equivalent to adding astyle attribute to the element's HTML.
• Add a declaration to a style rule.

What workflow should you use? For most scenarios, you probably want to use the inlinedeclaration workflow. Inline declarations have higher specificity than external ones, so the inlineworkflow ensures that the changes take effect in the element as you'd expect. SeeSelectorTypes for more on specificity.

If you're debugging an element's styles and you need to specifically test what happens when adeclaration is defined in different places, use the other workflow.

Add an inline declaration

To add an inline declaration:

1. Select an element.
2. In theStyles tab, click between the brackets of theelement.style section. The cursorfocuses, allowing you to enter text.
3. Enter a property name and pressEnter.

4. Enter a valid value for that property and pressEnter. In theDOM Tree, you cansee that astyle attribute has been added to the element.

   

   On the screenshot, themargin-top andbackground-color properties have been applied to the selected element. In theDOM Tree you can see the declarations reflected in the element'sstyle attribute.

Add a declaration to a style rule

To add a declaration to an existing style rule:

1. Select an element.
2. In theStyles tab, click between the brackets of the style rule to which you want to addthe declaration. The cursor focuses, allowing you to enter text.
3. Enter a property name and pressEnter.
4. Enter a valid value for that property and pressEnter.

On the screenshot, a style rule gets the newborder-bottom-style:groove declaration.

Change a declaration name or value

Double-click a declaration's name or value to change it. SeeChange enumerable values withkeyboard shortcuts for shortcuts for quickly incrementing or decrementing a value by 0.1, 1,10, or 100 units.

Change enumerable values with keyboard shortcuts

While editing an enumerable value of a declaration, for example,font-size, you can use the following keyboard shortcuts to increment the value by a fixed amount:

• Option+Up (Mac) orAlt+Up (Windows, Linux) toincrement by 0.1.
• Up to change the value by 1, or by 0.1 if the current value is between -1 and 1.
• Shift+Up to increment by 10.
• Shift+Command+Up (Mac) orControl+Shift+Page Up(Windows, Linux) to increment the value by 100.

Decrementing also works. Just replace each instance ofUp mentioned earlier withDown.

Change length values

You can use your pointer to change any property with length, such as width, height, padding, margin, or border.

To change the length unit:

1. Hover over the unit name and notice that it's underlined.

2. Click the unit name to select a unit from the drop-down.

To change the length value:

1. Hover over the unit value and notice that your pointer changes to a horizontal double-headed arrow.

2. Drag horizontally to increase or decrease the value.

To adjust the value by 10, holdShift when dragging.

Add a class to an element

To add a class to an element:

1. Select the element in theDOM Tree.
2. Click.cls.
3. Enter the name of the class in theAdd New Class box.
4. PressEnter.

Emulate light and dark theme preferences and enable automatic dark mode

To toggleautomatic dark mode or emulate the user's preference oflight or dark themes:

1. On theElements >Styles tab, clickToggle common rendering emulations.

2. Select one of the following from the drop-down list:

   • prefers-color-scheme: light. Indicates that the user prefers the light theme.
   • prefers-color-scheme: dark. Indicates that the user prefers the dark theme.
   • Automatic dark mode. Displays your page in dark mode even if you didn't implement it. Additionally, setsprefers-color-scheme todark automatically.

This drop-down is a shortcut forEmulate CSS media featureprefers-color-scheme andEnable automatic dark mode options of theRendering tab.

Toggle a class

To enable or disable a class on an element:

1. Select the element in theDOM Tree.
2. Open theElement Classes section. SeeAdd a class to an element. Below theAdd NewClass box 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. ClickNew Style Rule. DevTools inserts anew rule beneath theelement.style rule.

On the screenshot, DevTools adds theh1.devsite-page-title style rule after clickingNew Style Rule.

Choose which style sheet to add a rule to

Whenadding a new style rule, click and holdNew Style Rule to choose which style sheetto add the style rule to.

Toggle a declaration

To toggle a single declaration on or off:

1. Select an element.
2. In theStyles tab, hover over the rule that defines the declaration. Checkboxes appear nextto each declaration.
3. Check or clear the checkbox next to the declaration. When you clear a declaration, DevToolscrosses it out to indicate that it's no longer active.

On the screenshot, thecolor property for the currently-selected element is toggled off.

Edit the::view-transition pseudo-elements during an animation

See the corresponding section inAnimations.

For more information, seeSmooth and simple transitions with the View Transitions API.

Align grid items and their content with the Grid Editor

See the correspondingsection in Inspect CSS grid.

Change colors with the Color Picker

SeeInspect and debug HD and non-HD colors with the Color Picker.

Change angle value with the Angle Clock

TheAngle Clock provides a GUI for changing<angle>s in CSS property values.

To open theAngle Clock:

1. Select an element with angle declaration.

2. In theStyles tab, find thetransform orbackground declaration that you want to change.Click theAngle Preview box next to the angle value.

   

   The small clocks to the left of-5deg and0.25turn are the angle previews.

3. Click the preview to open theAngle Clock.

   

4. Change the angle value by clicking on theAngle Clock circle or scroll your mouse toincrease / decrease the angle value by 1.

5. There are more keyboard shortcuts to change the angle value. Find out more in theStyles panekeyboard shortcuts.

Change box and text shadows with the Shadow Editor

TheShadow Editor provides a GUI for changingtext-shadow andbox-shadow CSS declarations.

To change shadows with theShadow Editor:

1. Select an element with a shadow declaration. For example, select the next element.

2. In theStyles tab, find a shadow icon next to thetext-shadow orbox-shadow declaration.

   

3. Click the shadow icon to open theShadow editor.

   

4. Change the shadow properties:

   • Type (only forbox-shadow). PickOutset orInset.
   • X and Y offsets. Drag the blue dot or specify values.
   • Blur. Drag the slider or specify a value.
   • Spread (only forbox-shadow). Drag the slider or specify a value.

5. Observe the changes applied to theelement.

Edit animation and transition timings with the Easing Editor

TheEasing Editor provides a GUI for changing the values oftransition-timing-function andanimation-timing-function.

To open theEasing Editor:

1. Select an element with a timing function declaration, like the<body> element on this page.
2. In theStyles tab, find the purple icon next to thetransition-timing-function,animation-timing-function declarations, or thetransition shorthand property.
3. Click the icon to open theEasing Editor:

Use presets to adjust timings

To adjust timings with a click, use the presets in theEasing Editor:

1. In theEasing Editor, to set akeyword value, click one of the picker buttons:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. In thePresets switcher, click or buttons to pick one of the following presets:

   • Linear presets:elastic,bounce, oremphasized.
   • Cubic Bezier presets:

Configure custom timings

To set custom values for timing functions, use the control points on the lines:

• For linear functions, click anywhere on the line to add a control point and drag it. Double-click to remove the point.

  

• For Cubic Bezier functions, drag one of the control points.

  

Any change triggers a ball animation in thePreview at the top of editor.

(Experimental) Copy CSS changes

Note: To enable this experimental feature, checkSync CSS changes in the Styles tab underSettings >Experiments and reload DevTools.

With this experiment enabled, theStyles tab highlights your CSS changes in green.

To copy a single CSS declaration change, hover over the highlighted declaration and click theCopy button.

To copy all CSS changes across declarations at once, right-click on any declaration and selectCopy all CSS changes.

Additionally, you cantrack changes you make with theChanges tab.