Workshop › Traffic light › Step 3 of 12

Three lamps inside

What we are doing

A traffic light has three lamps. We put three boxes inside the body, each with the class lamp.

```html
<div class="light">
  <div class="lamp"></div>
  <div class="lamp"></div>
  <div class="lamp"></div>
</div>
```

What it means

• The three lamp boxes are between the body's opening and closing tags, so they are inside it.
• Many elements can share one class.

Your turn

Open the body's div onto separate lines and write the three lamps inside it.

Skills: HTML structure

← Give the box a shape Round lamps →

All steps

1. An empty box
2. Give the box a shape
3. Three lamps inside
4. Round lamps
5. Stack them in the middle
6. Red, yellow, green
7. Turn them off
8. A timeline for a lamp
9. Play the timeline
10. One after another
11. One setting for the speed
12. Build it yourself: a pole