Workshop › Traffic light › Step 2 of 12

Give the box a shape

What we are doing

The box gets a size, a dark color and rounded corners: the body of the traffic light.

```css
.light {
  width: 90px;
  height: 250px;
  background: #222;
  border-radius: 16px;
}
```

What it means

• .light styles the element with class="light".
• width and height set its size in pixels; background its color; border-radius rounds the corners.

Your turn

Write the rule inside <style>, under the body rule.

Skills: Styling with CSS

← An empty box Three lamps inside →

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