A button to inspect
Right-click the button → Inspect. Find the crossed-out background: orange, the colr line with a warning icon, and the user agent stylesheet rule for button.
DevTools shows every rule that matches an element, which declarations won and which were crossed out, the final computed values and the box model, and lets you edit and toggle styles live to find out why something looks the way it does.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
In the first example, without touching the HTML, make the button orange again by editing only the CSS. Give two different ways.
In the second example, change the CSS so the box's visible width is exactly 300px, keeping padding: 16px and the 4px border. What width do you need?
Explain it without notes
How do you find out why a CSS declaration isn't taking effect?
What is the difference between the Styles pane and the Computed tab?
What does it mean when a declaration is crossed out, and when it has a warning icon?
Preview
Console
Nothing logged yet.Expected console output
background-color: rgb(46, 139, 87)
color: rgb(255, 255, 255)
padding: 10px 18px