Elements panel
Shows the HTML node you selected on the page.
Platform under construction
CSS DevTools
DevTools turns CSS from guessing into evidence. Inspect elements, edit rules live, see overridden declarations and understand the box model in the browser.
Inspect element Toggle declaration Read computed style Copy fix back to CSS
CSS Basics
DevTools is where CSS becomes visible and debuggable.
Every modern browser includes developer tools. For CSS, the most important workflow is inspecting an element and reading which rules apply to it.
The Styles panel shows matching CSS rules. The Computed panel shows the final value after cascade, inheritance and browser defaults. The box model view explains content, padding, border and margin.
Good CSS developers do not guess for long. They inspect, toggle declarations, edit values live and then move the proven change back into the stylesheet.
Styles panel
Shows matching CSS rules and crossed-out declarations.
Computed panel
Shows the final values the browser actually uses.
Device toolbar
Tests responsive layouts at different viewport sizes.
Visual model
Make the invisible browser work visible.
CSS becomes easier when you can see the parts: what is selected, what is declared, what the browser loads and what the final interface receives.
Elements
<article class="card"> <h1>CSS Debugging</h1> <p>Inspect the applied styles.</p> </article>
Styles
.card {
padding: 24px;
border-radius: 18px;
}
h1 {
margin: 0 0 12px;
}
Computed
- display: block
- padding: 24px
- color: rgb(247, 249, 255)
- box-sizing: border-box
Examples
Good CSS is readable, intentional and easy to change.
Evidence-based CSS debugging
1. Inspect the element. 2. Check which selector applies. 3. Toggle suspicious declarations. 4. Read the computed value. 5. Test at mobile width. 6. Copy the smallest working fix into CSS.
Guessing without the browser
1. Add more !important. 2. Refresh randomly. 3. Change unrelated CSS. 4. Hope the layout moves. 5. Forget to test mobile.
Rules that matter
Use these rules before memorizing more properties.
Beginners often try to learn CSS by collecting declarations. That is backwards. Learn the decisions first, then the properties become much easier to remember.
Inspect the exact element
Do not debug from memory. Select the node that actually has the problem.
Look for crossed-out rules
A crossed-out declaration lost to another rule, invalid syntax or unsupported value.
Use Computed for truth
Styles shows candidates. Computed shows the final result.
Edit live, then copy back
DevTools changes are temporary until you place them in your source files.
Use the box model view
Spacing problems become clearer when you see content, padding, border and margin separately.
Test responsive early
Device toolbar catches layout issues before users do.
Production thinking
CSS quality shows up in trust, accessibility and speed of change.
Why does this matter?
CSS has many moving parts. DevTools shows what the browser actually did, which makes debugging faster and makes you a better designer of systems.
Accessibility
DevTools can inspect focus states, contrast, accessibility names and reduced-motion behavior. Use it to verify people can actually use the interface.
Production note
Before shipping, inspect important components at multiple widths and states. A page that only works in your default viewport is not finished.
SEO note
DevTools performance and rendering tools help find slow assets, layout shifts and blocked resources that can affect user experience.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change padding from 26px to 46px and notice the box model effect.
- Change border-radius and describe how the component feeling changes.
- Open your browser DevTools and inspect the preview iframe if your browser allows it.
Practice assignment
Do this before moving to the next lesson.
- Inspect a real page element on this site.
- Find one rule in Styles and one final value in Computed.
- Use responsive mode to check the same element at mobile width.
Try it yourself
Use the lab like a small DevTools target
Self-check
Before you continue, prove that you understand CSS DevTools.
Do not only read the lesson. Answer these questions out loud or write the answers in your own notes. CSS becomes real when you can explain what the browser is doing.
- Can you inspect an element and find the rule that styles it?
- Can you explain why a declaration is crossed out?
- Can you find the final computed value for color, margin or display?
- Can you use the box model view to debug spacing?
- Can you test the same component in a narrow viewport?
Senior audit upgrade
DevTools is a CSS debugging lab.
The senior habit is not guessing. Reproduce the problem, inspect the element, read computed styles, disable declarations and only then change the source CSS.
Reproduce
Start from the exact viewport, state and content that breaks.
Inspect computed
The computed panel shows the final value after cascade, inheritance and layout decisions.
Disable rules
Turn declarations off one by one to find the actual cause instead of adding another override.
Chapter project
Style a clear lesson card
Use selectors, declarations and external CSS to turn semantic HTML into a polished learning card.
Build
a reusable card with typography, spacing, color and a clear call to action
Deliverables
- external stylesheet
- class-based card styling
- DevTools screenshot or notes
Quality checks
- no inline CSS
- readable selector names
- visible focus and readable contrast
Review question
Can another student change the card colors without touching the HTML?