Lesson 2: CSS foundations and cascade: Syntax drill

Concept Explanation

This lesson is a hands-on drill for writing basic CSS rules cleanly and consistently. The goal is not to build a full component yet, but to get comfortable with the structure of selector, property, and value. You will practice making deliberate edits, checking the visual result, and keeping your rules readable. A beginner who can write small rules with confidence learns much faster in later layout and responsive lessons.

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

• Practice changing one property at a time so the effect of each edit is obvious.
• Rename or regroup rules only after the current version works as expected.
• Check spacing, border, and text styling separately instead of changing everything at once.
• Note one place where a clearer selector name improves readability immediately.

Step-by-step Guide

1. Create a simple card in HTML and connect it to the starter CSS.
2. Edit the padding and border first so you can see the box structure clearly.
3. Adjust the title and text styles without changing the selector names.
4. Make one intentional mistake in a property or value, then fix it after spotting the issue.
5. Review the final CSS and remove anything that does not contribute to the card.

Practice Exercises

• Build a notification box with a title and message using the same rule-writing pattern.
• Create a second card variant by changing only a few values, not the full structure.
• Add a hover state or emphasis style without making the stylesheet harder to read.

Coding Challenges

• Write two visually different cards while keeping the shared rules easy to spot.
• Improve the starter CSS so another beginner can scan it and understand it quickly.

Mini Practice Tasks

• Change one selector name to something clearer.
• Test one spacing adjustment and note the visual difference.
• Write one sentence describing what the starter CSS styles.