Workshop › Traffic light › Step 11 of 12

One setting for the speed

What we are doing

The round length is written once, as a CSS variable. Changing that one value speeds up or slows down the whole light.

```css
:root {
  --round: 6s;
}

animation: glow var(--round) infinite;
```

What it means

• :root is the whole page; variables set there are visible everywhere. Their names start with --.
• var(--round) reads the variable where a value is needed.

Your turn

1. Write the :root rule under the body rule.
2. In .lamp, replace 6s with var(--round).

Skills: Styling with CSS

← One after another Build it yourself: a pole →

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