Workshop › My business card › Step 5 of 12

Make the box look like a card

What we are doing

Now we style the card box: white, with space inside and rounded corners.

```css
.card {
  background: white;
  padding: 24px;
  border-radius: 12px;
}
```

What it means

• .card (with a dot) selects elements with class="card".
• padding: 24px adds space between the card's edge and its text.
• border-radius: 12px rounds the corners.

Your turn

Write the .card rule under the body rule, after an empty line, still inside <style>.

Skills: Styling with CSS

← Your first CSS Center the card →

All steps

1. Your name as a heading
2. A line about you
3. Put them in a box
4. Your first CSS
5. Make the box look like a card
6. Center the card
7. A soft shadow
8. Color your name
9. Add your links
10. Links in a row
11. Links that react
12. Build it yourself: a card that reacts