CSS features reference

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

See View and change CSS to learn the basics.

Select an element

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

An example of a selected element.

On the screenshot, the h1 element that's highlighted blue in the DOM Tree is the selected element. To the right, the element's styles are shown in the Styles tab. To the left, the element is highlighted in the viewport, but only because the mouse is hovering over it in the DOM Tree.

See View an element's CSS for a tutorial.

There are many ways to select an element:

  • In your viewport, right-click the element and select Inspect.
  • In DevTools, click Select an element Select an element or press Command+Shift+C (Mac) or Control+Shift+C (Windows, Linux), and then click the element in the viewport.
  • In DevTools, click the element in the DOM Tree.
  • In DevTools, run a query like document.querySelector('p') in the Console, right-click the result, and then select Reveal in Elements panel.

View CSS

Use the Elements > Styles and Computed tabs to view CSS rules and diagnose CSS issues.

The Styles 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 the Sources panel. If the style sheet is minified, see