# Look Inside Any Page with Developer Tools
Open the browser's developer tools on any page, find every CSS rule applied to an element, read what a crossed-out line means, and try a change live before you copy it into your stylesheet.
Novice · CSS · Web Development · Updated November 1, 2026
## 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:
| | Windows | macOS |
|---|---|---|
| The keyboard | **F12**, or **Ctrl+Shift+I** | **Cmd+Option+I** |
| On one element | Right-click it and choose **Inspect** | The same: right-click (or Control-click) and choose **Inspect** |
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:
```html
Latte $4.25
```
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 `` 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:
```css
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.
```css
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](https://www.ask-codey.com/glossary/developer-tools)
- [Browser default styles](https://www.ask-codey.com/glossary/browser-default-styles)
- [CSS rule](https://www.ask-codey.com/glossary/css-rule)
- [Declaration](https://www.ask-codey.com/glossary/declaration-css)
## Cheat sheets
- [Look Inside Any Page with Developer Tools](https://www.ask-codey.com/cheat-sheets/css-developer-tools-cheat-sheet)
Source: https://www.ask-codey.com/lessons/css-developer-tools