Lesson 3 of 8
Styling a card
- 10 min
- 4 checks
- 3 hints
- Go to task
Goal
Colors, padding and rounded corners
01
Explanation
HTML describes what an element is, and CSS describes how it looks. Every CSS rule starts with a selector that picks the elements, followed by the properties inside curly braces.
In the rule .card { background: #fff; }, the dot means the rule applies to elements that have the class named card.
padding is space inside an element, and margin is space outside it. Mixing the two up is one of the most common beginner mistakes.
02
Your task
Style the card: give it a background color, inner padding of at least 16 pixels and rounded corners, and give its heading a color that stands out.
Checks
4 checks- The card has a background color
- Inner padding of 16px or more
- The corners are rounded
- The heading inside the card isn't black