2.02 · Lab

Colors & Units

Color and size, on a real element for the first time. One fixed width, one that answers to its parent.

Exercise

Style a distance badge

Checks itself — try as often as you like

Below is a small frame with a distance badge inside it. Style it:

.frame — width: 300px; and background-color: lightyellow;.
.badge — width: 50%; (half of .frame's width) and color: navy;.

Try writing the colors as named keywords first — lightyellow and navy — the same way the lesson showed hex and rgb() as alternate spellings for the same colors, if you'd rather practice those instead.