-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

Most of the CSS we have done so far has been fairly simple. Everything we did worked the first time we tried, and that doesn't always happen. Often, CSS doesn't work and I'm left wondering what I missed. Syntax highlighting in my editor, while helpful, doesn't stop me from overlooking mistakes. Usually, it's a tiny mistake that causes something not to work and it's hard to find the error and fix it. In this section, we'll simply look at how to open up DevTools. Then, we'll modify some CSS in the inspector and finally look at the console to find errors.
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...