Look Inside Any Page with Developer Tools

After this lesson you can

• Open the developer tools and find the CSS rules applied to an element in the Styles pane
• Read the Styles pane, including which file a rule comes from and what a crossed-out declaration means
• Try a CSS change live in the developer tools, then copy it into the stylesheet to keep it

Key takeaways

• Press F12 (Cmd+Option+I on a Mac), or right-click an element and choose Inspect, to open the developer tools.
• The Elements panel shows the page's HTML, and the Styles pane shows every CSS rule for the element you chose, with its file and line. Firefox calls them Inspector and Rules.
• A crossed-out declaration is one the browser isn't using: another rule won, or, with a warning sign, the browser couldn't read it.
• A change you make in the developer tools lasts only until the page reloads, so copy what works into your stylesheet.

Sooner or later a style won't show up. You wrote the rule, you saved, and the heading is still the wrong color. Guessing wastes an evening; looking takes a minute. Every modern browser has developer tools built in: panels that show exactly what the browser did with your HTML and CSS, on your own pages and on any site on the internet. Web developers keep them open nearly all day.

Open the developer tools

Think of a mechanic who plugs a reader into a car and sees what every part is doing, instead of guessing from the noise. The developer tools are that reader, for a web page. There are three ways to open them:

Inspect is the one to use most: it opens the tools with the element you clicked already chosen. The tools open beside or below the page. You can drag the edge between them to make room.

Try it. Open The Daily Grind's menu with Live Server, right-click a price such as $4.25, and choose Inspect.

The Elements panel and the Styles pane

The developer tools have several panels across the top. Two matter for CSS, and Chrome and Edge give them the same names:

• The Elements panel shows the page's HTML as a tree you can open and close. Point at a line, and the browser highlights that element on the page. Click a line to choose it.
• The Styles pane, beside or below the HTML, lists every CSS rule that applies to the element you chose, with the rule that wins at the top.

In Firefox, the same two parts are called the Inspector panel and the Rules pane. They work the same way.

When you inspect a price on the menu, the Elements panel highlights its line:

<li>Latte <span class="price">$4.25</span></li>

and the Styles pane shows the .price rule you wrote in Your First CSS Rule, with font-weight: bold and color: saddlebrown. To the right of the rule is a link such as styles.css:11: the file it came from and the line it starts on. Click it, and the tools open your stylesheet at that line.

Reading the Styles pane

Below your own rules, the Styles pane shows two more kinds:

• Inherited from body: some properties, such as color and font-family, pass from an element to everything inside it. The price's text color would come from your body rule if .price didn't set one.
• user agent stylesheet: the browser's default styles, the rules every browser uses before yours, such as making <h1> bold and big. "User agent" is the formal name for the browser. Firefox hides these unless you turn on Show Browser Styles in its settings.

A line with a line through it is a declaration the browser isn't using. There are two reasons. Add this rule at the very end of styles.css and save:

h1 {
  colr: darkgreen;
  color: darkgreen;
}

Inspect the heading The Daily Grind. The new rule is at the top of the Styles pane, and it won: the heading is dark green.

• colr: darkgreen is crossed out with a warning sign beside it. The browser couldn't read it (in Chrome and Edge, point at the sign and it says Unknown property name), so it skipped it. This is where the typos from the last lesson show up.
• Further down, in your first h1 rule, color: saddlebrown is crossed out with no warning sign. It's a perfectly good declaration that lost: two rules gave the heading a color, and the later one won. Module 2, The Cascade and Selectors, explains exactly how the browser decides which rule wins.

Delete the rule you added, and save. The heading goes back to saddle brown.

Try a change live, then keep it

Every value in the Styles pane can be changed right there. Click saddlebrown in the h1 rule, type teal, and press Enter: the heading changes at once. Next to each declaration is a small checkbox when you point at it; untick it to switch that one declaration off and see the page without it.

These changes happen only in the browser's copy of the page. Reload, and they're gone, and nothing in your files has changed. That's what makes the developer tools a safe place to experiment, and it's also the trap: when you find a change you like, copy it into styles.css, save, and reload to check it came from your file.

h1 {
  color: teal;
  font-family: Georgia, serif;
}

Try it. Open any website you use, right-click its main headline and choose Inspect. Change its color, or its font-size to 60px. The change is only on your screen: nobody else sees it, and reloading brings the real page back. Every site on the internet is open for you to learn from this way.

Check yourself

2 questions to try on the lesson page.

So what

The developer tools turn "why won't this work?" into something you can see: which rules apply, which won, and which the browser skipped. Open them first, every time a page doesn't look the way you expected.

Key terms

• Developer Tools
• Browser default styles
• CSS rule
• Declaration

Cheat sheets

• Look Inside Any Page with Developer Tools