Beginner45 minutesCSSDebugging

CSS Debug Practice

Project Objectives

  • Practise finding and fixing common CSS bugs in a real stylesheet
  • Use browser DevTools to diagnose broken rules
  • Recognise missing brackets, selector typos, syntax errors, and specificity conflicts
  • Build a systematic debugging habit: fix one thing at a time, test, repeat

Prerequisites: Before starting this project, you should complete the Why Your CSS Isn’t Working tutorial.

Part 1 — Guided: Fix 4 Broken Styles

Start with a simple page that has 4 intentional CSS bugs. Work through them one at a time using the debugging checklist from the tutorial.

Step 1: Create the HTML file

Create a new folder called css-debug-practice. Inside it, create debug-practice.html:

Step 2: Create the broken stylesheet

Inside a css/ subfolder, create debug.css with these intentionally broken rules:

Step 3: Open the page & observe

Open debug-practice.html in your browser. You should notice:

  • The h1 may not be styled at all
  • The hero section has no background
  • The nav links are still in a vertical list
  • The intro paragraph font-size looks wrong

Open DevTools (F12) and inspect the h1. What do you see in the Styles panel?

Step 4: Fix the bugs

  1. Bug 1 — Missing closing bracket: The h1 rule has no } . Add it. Save & hard-refresh. Notice how fixing this one bracket may also fix rules below it.
  2. Bug 2 — Selector typo: The HTML uses class="hero-section" but the CSS says .hero_section (underscore). Change it to .hero-section.
  3. Bug 3 — Missing colon:list-style none should be list-style: none;
  4. Bug 4 — Space in value:1.2 rem should be 1.2rem (no space).

Step 5: Verify in DevTools

After all fixes, inspect each element and confirm no rules are crossed out or inactive:

  • h1 → color: navy; font-size: 2.5rem;
  • .hero-section → background-color: #f0f0f0;
  • nav ul → display: flex; list-style: none;
  • .intro → font-size: 1.2rem;

Part 1 complete! You’ve fixed 4 common CSS bugs. Move on to Part 2 for a bigger challenge.

Part 2 — Challenge: 7 Bug Detective

This page is a small news-style site called The Daily Code. The stylesheet has 7 bugs spread across 5 categories. Use DevTools to find and fix them all.

Step 1: Create the HTML file

In a new folder (or the same project folder), create detective-challenge.html:

Step 2: Create the broken stylesheet

Create css/detective.css:

Step 3: Find all 7 bugs

Open the page in your browser. Use DevTools to systematically inspect each section. The 7 bugs span these categories:

CategoryHow many?Hint
Syntax error (missing punctuation)2One is a semicolon, one is a colon
Missing bracket1It will break rules below it too
Selector mismatch1Check underscores vs hyphens
Value error1Watch for spaces where they shouldn’t be
Specificity / cascade conflict2One involves !important, one involves selector weight

Challenge rules: Fix one bug at a time. After each fix, save and hard-refresh to confirm. Document each bug and your fix in an HTML comment before moving to the next one.

Step 4: Stretch goals

  • Add a third-party CSS file (like a simple reset) and create a conflict that your custom styles override
  • Use the Computed tab in DevTools to trace an inherited property through three levels of nesting
  • Create a z-index bug and fix it by adding the correct position property

Submit Your Project

Once you’ve completed both parts, you can:

  • Save your fixed files for future reference
  • Compare your fixes with a classmate’s to see different approaches
  • Create your own “buggy stylesheet” challenge for someone else

Next Steps: Now that you can debug CSS, try the CSS Flexbox tutorial to learn modern layout techniques — and use your new debugging skills whenever something goes wrong.

Quiz Game
All Projects