` elements inside elements with a `card` class.
To edit the `@scope` rule, double-click it.
#### View `@font-palette-values` at-rules
The [`@font-palette-values` CSS at-rule](https://developer.mozilla.org/docs/Web/CSS/@font-palette-values) lets you customize the default values of the `font-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](https://developer.chrome.com/docs/devtools/open.md.txt#elements) in the preview.
2. In **Styles** , 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](https://www.w3.org/TR/css-anchor-position-1/#fallback-rule) along with the `position-try-options` property lets you define alternative anchor positions for elements. To learn more, see [Introducing the CSS anchor positioning API](https://developer.chrome.com/blog/anchor-positioning-api.md.txt).
**Elements** \> **Styles** resolves and links the following:
- `position-try-options` property values to a dedicated `@position-try --name` section.
- `position-anchor` property values and `anchor()` arguments to the corresponding elements with `popovertarget` attributes.
Inspect the `position-try-options` values and `@position-try` sections in the next preview:
Demo using anchor with `popover`
1. In the preview, open the submenu, that is, click **YOUR ACCOUNT** then **STOREFRONT**.
2. [Inspect](https://developer.chrome.com/docs/devtools/open.md.txt#elements) the element with `id="submenu"` in the preview.
3. In **Styles** , find the `position-try-options` property and click its `--bottom` value. The **Styles** tab takes you to the corresponding `@position-try` section.
4. Click the `position-anchor` value link or the same `anchor()` arguments. The **Elements** panel selects the element with the corresponding `popovertarget` attribute and the **Styles** tab shows the element's CSS.
To edit values, double-click them.
### View an element's box model
To view [the box model](https://developer.mozilla.org/docs/Learn/CSS/Introduction_to_CSS/Box_model) of an element, go to the **Styles** tab and click the  **Show sidebar** button in the action bar.
To change a value, double-click on it.
### Search and filter an element's CSS
Use the **Filter** box on the **Styles** and **Computed** tabs to search for specific CSS
selectors (including parent selectors in nested rules), properties, or values.
To also search inherited properties in the **Computed** tab, check the **Show All** checkbox.
To navigate the **Computed** tab, group the filtered properties in collapsible categories by checking **Group**.
### 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. The **Emulate a focused page** option lets you debug such an element as if it is in focus.
> [!CAUTION]
> **Caution:** With this option turned on, the `document.visibilityState` is set to `visible` and the `visibilitychange` event doesn't fire. For more information, see [Page Visibility API](https://developer.mozilla.org/docs/Web/API/Page_Visibility_API).
Try emulating a focused page on this [demo page](https://jec.fish/demo/disappearing-pop-up):
1. Focus the input element. Another element appears under it.
2. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt). The DevTools window is now in focus instead of the page, so the element disappears again.
3. In **Elements** \> **Styles** , click **:hov** , check **Emulate a focused page** , and make sure the input [element is selected](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select). You can now inspect the element under it.
You can also find [the same option on the **Rendering** panel](https://developer.chrome.com/docs/devtools/rendering/apply-effects.md.txt#emulate_a_focused_page).
To discover more ways to freeze an element, see [Freeze screen and inspect disappearing elements](https://developer.chrome.com/blog/devtools-tips-35.md.txt).
### Toggle a pseudo-class
To toggle a pseudo-class:
1. [Select an element](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select).
2. On the **Elements** panel, go to the **Styles** tab.
3. Click **:hov**.
4. Check the pseudo-class that you want to turn on.
In this example, you can see that DevTools applies the `background-color` declaration to the element, even though the element is not actually hovered over.
The **Styles** tab shows the following pseudo-classes for all elements:
- [`:active`](https://developer.mozilla.org/docs/Web/CSS/:active)
- [`:focus`](https://developer.mozilla.org/docs/Web/CSS/:focus)
- [`:focus-within`](https://developer.mozilla.org/docs/Web/CSS/:focus-within)
- [`:target`](https://developer.mozilla.org/docs/Web/CSS/:target)
- [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover)
- [`focus-visible`](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)
Additionally, some elements may have their own pseudo-classes. When you select such an element, the **Styles** tab shows a **Force specific element state** section that you can expand and turn on pseudo-classes specific to the element.
See [Add a pseudostate to a class](https://developer.chrome.com/docs/devtools/css.md.txt#pseudostates) for an interactive tutorial.
### View inherited highlight pseudo-elements
[Pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/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 the [specification](https://drafts.csswg.org/css-pseudo-4/#highlight-cascade), when multiple styles conflict, cascade determines the winning style.
> [!NOTE]
> **Note:** To enable this feature, run Chrome with the `--enable-blink-features=HighlightInheritance` flag.
To better understand the inheritance and priority of the rules, you can view the inherited highlight pseudo-elements:
1. [Inspect the text below](https://developer.chrome.com/docs/devtools/open.md.txt#elements).
I inherited the style of my parent's highlight pseudo-element. Select me!
2. Select a portion of the text above.
3. In the **Styles** tab, scroll down to find the `Inherited from ::selection pseudo of...` section.
### View cascade layers
[Cascade layers](https://developer.chrome.com/blog/cascade-layers.md.txt) 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](https://developer.chrome.com/docs/devtools/open.md.txt#elements) the next element and open **Elements** \> **Styles**.
In the **Styles** tab, view the 3 cascade layers and their styles: `page`, `component` and `base`.
To view the layer order, click the layer name or the  **Toggle CSS layers view** button.
The `page` 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 the [Command Menu](https://developer.chrome.com/docs/devtools/command-menu.md.txt).
2. Start typing `Rendering` and select `Show Rendering`.
3. For the **Emulate CSS Media** drop-down, select **print**.
### View used and unused CSS with the Coverage tab
The Coverage tab shows you what CSS a page actually uses.
1. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) while DevTools is in focus to open the Command Menu.
2. Start typing `coverage`.
3. Select **Show Coverage**. The Coverage tab appears.
4. Click  **Reload** .
The page reloads 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.
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 of `devsite-google-blue.css` are unused, whereas lines 59 to 63 are used.
### Force print preview mode
See [Force DevTools Into Print Preview Mode](https://developer.chrome.com/docs/devtools/css/print-preview).
## Copy CSS
From a single drop-down menu in the **Styles** tab, you can copy separate [CSS rules, declarations, properties, values](https://developer.mozilla.org/docs/Learn/CSS/First_steps/What_is_CSS#css_syntax)
Additionally, you can copy CSS properties in JavaScript syntax. This option is handy if you're using [CSS-in-JS](https://developer.chrome.com/blog/css-in-js.md.txt) libraries.
To copy CSS:
1. [Select an element](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select).
2. In the **Elements** \> **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: `css
property: value;`
- **Copy property** . Copies only the `property` name.
- **Copy value** . Copies only the `value`.
- **Copy rule** . Copies the entire CSS rule: `css
selector[, selector] {
property: value;
property: value;
...
}`
- **Copy declaration as JS** . Copies the property and its value in JavaScript syntax: `js
propertyInCamelCase: 'value'`
- **Copy all declarations** . Copies all properties and their values in the CSS rule: `css
property: value;
property: value;
...`
- **Copy all declarations as JS**. Copies all properties and their values in JavaScript syntax:
\`\`\`js
propertyInCamelCase: 'value',
propertyInCamelCase: 'value',
...
- **Copy all CSS changes** . [Copies the changes](https://developer.chrome.com/docs/devtools/css/reference.md.txt#copy-css-changes) you make in the **Styles** tab across all declarations.
- **View computed value** . Takes you to the [**Computed** tab](https://developer.chrome.com/docs/devtools/css/reference.md.txt#computed).
## Change CSS
This section lists all the ways you can change CSS in **Elements** \> **Styles**.
Additionally, you can:
- [Override CSS across page loads](https://developer.chrome.com/docs/devtools/overrides.md.txt).
- [Save modified CSS to your local sources in a workspace](https://developer.chrome.com/docs/devtools/workspaces.md.txt).
### Change CSS with code completion
To experiment with more complex combinations of CSS properties, like gradients or box shadows, without remembering their exact syntax, or to quickly build out grid- and flex- layouts, relying on multiple related properties, you can start typing a CSS property and use code completion.
### Add a CSS declaration to an element
Since the order of declarations affects how an element is styled, you can add declarations in
different ways:
- [Add a inline declaration](https://developer.chrome.com/docs/devtools/css/reference.md.txt#add-declaration-inline). Equivalent to adding a `style` attribute to the element's HTML.
- [Add a declaration to a style rule](https://developer.chrome.com/docs/devtools/css/reference.md.txt#add-declaration-to-rule).
**What workflow should you use?** For most scenarios, you probably want to use the inline
declaration workflow. Inline declarations have higher specificity than external ones, so the inline
workflow ensures that the changes take effect in the element as you'd expect. See [Selector
Types](https://developer.mozilla.org/docs/Web/CSS/Specificity#Selector_Types) for more on specificity.
If you're debugging an element's styles and you need to specifically test what happens when a
declaration is defined in different places, use the other workflow.
#### Add an inline declaration
To add an inline declaration:
1. [Select an element](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select).
2. In the **Styles** tab, 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** , you can
see that a `style` attribute has been added to the element.
On the screenshot, the `margin-top` and `background-color` properties have been applied to the selected element. In the **DOM Tree** you can see the declarations reflected in the element's `style` attribute.
#### Add a declaration to a style rule
To add a declaration to an existing style rule:
1. [Select an element](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select).
2. In the **Styles** tab, 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.
On the screenshot, a style rule gets the new `border-bottom-style:groove` declaration.
### Change a declaration name or value
Double-click a declaration's name or value to change it. See [Change enumerable values with
keyboard shortcuts](https://developer.chrome.com/docs/devtools/css/reference#values-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) or Alt+Up (Windows, Linux) to increment 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) or Control+Shift+Page Up (Windows, Linux) to increment the value by 100.
Decrementing also works. Just replace each instance of Up mentioned earlier with
Down.
### Change length values
> [!WARNING]
> **Deprecated:** This feature is deprecated in Chrome 123. To temporarily turn it back on again, clear the **Settings** \> **Experiments** \> **Deprecate CSS \