CSS Exercises
Each lesson page has an "Exercise" block — a small fill-in-the-blank with one or two missing tokens. You complete the code, click Check answers, and the page tells you if you got it right.
How it works
- The code template has
____markers where the answer goes. - Type the missing token into each blank.
- Press Check answers; correct fields turn green, wrong ones red.
- Show hint uncovers a clue if you're stuck.
- Many blanks accept multiple correct answers (e.g.
#04AA6Dorgreen).
Example shape
Instruction
Make the heading text green using an inline style.
Template (a blank is shown as ____)
<h1 style="color: ____;">Hello</h1>
Tips for fast progress
| Habit | Why it helps |
|---|---|
| Read the instruction twice | Most exercises hint at the answer in their wording. |
| Open the editor on the same lesson | Experiment freely — the editor is the same code with no blanks. |
| Use the hint after one wrong try | Hints are short and targeted. |
Tip: Doing the exercise on every lesson — even quick ones — adds up. By topic 20 you'll find yourself writing CSS without checking the docs.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Exercises</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
What character do exercises use as a blank marker?
Answer:
Four of the same character in a row.
Discussion
Loading…