Lesson 3: CSS foundations and cascade: Debugging scenario

Concept Explanation

Debugging CSS often means figuring out why something looks wrong even though the stylesheet seems valid. In this lesson you will work through a small styling problem, inspect the rule that causes it, and fix the issue with a minimal change. The focus is on reading the existing CSS carefully, not rewriting everything from scratch. That habit is important in real projects, where most styling work involves adjusting or correcting code that already exists.

Where to Put the Code

1. Start with variables and inputs. Place style rules in reusable class selectors.
2. Add processing logic in the middle section.
3. Finish with output and quick validation.

Command Reference

• Inspect the starter rules and identify which declaration causes the text to be hard to read.
• Change only one declaration first, then verify whether the problem is solved.
• Use a before-and-after comparison to explain why the fix works.
• Record one debugging habit that helped you avoid changing unrelated styles.

Step-by-step Guide

1. Render a notice box and confirm that the text contrast is poor in the starter version.
2. Find the exact declaration responsible for the readability problem before editing anything.
3. Update the smallest possible part of the stylesheet and check the result again.
4. Test one normal message and one message that includes a strong element.
5. Finish by describing the bug in plain language and the specific rule that fixed it.

Practice Exercises

• Create a second broken example involving spacing or selector targeting, then repair it.
• Build a new alert style and deliberately introduce one visual bug for practice.
• Write a short report listing the original issue, the fix, and the final result.

Coding Challenges

• Debug a component with two overlapping rules and explain which one should stay.
• Refine the final stylesheet so it fixes the bug without making selectors more complex than necessary.

Mini Practice Tasks

• Change only one line to improve readability.
• Write a one-line summary of the bug.
• Rename a selector or comment so the file is easier to scan later.