How to open developer tools

To open up Chrome's DevTools, all you need to do is right-click or Ctrl + click on any part of the page. You'll get a contextual menu, as shown in the following screenshot. When you select the Inspect Element option, you get a whole new world of techie goodness:

What typically happens is DevTools will occupy the lower half of your screen. As you can see in the following screenshot, on the left-hand side, you have your HTML as rendered by the browser, technically referred to as the DOM. On the right-hand side, you will have all your styles:

If you hover over something on the left-hand side, it gets highlighted at ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.