Reset and typography

Step 1 of 5

Add a universal box-sizing reset.
Then give the body a font family and a text color.

Instructions

In style.css:

Add * { box-sizing: border-box; }.
On body, set font-family to a stack like Arial, Helvetica, sans-serif.

Hints

Tip: set a default text color on body so the whole page inherits it.

Refreshers: CSS Selectors.

CSS Fonts.

How it works

Style the card

Step 2 of 5

Give .card a background, a border, padding, and rounded corners.

Instructions

In style.css:

Add a .card { ... } rule.
Set a background-color.
Set border, like 1px solid #ccc.
Set padding so the text does not touch the edges.
Set border-radius to round the corners.

Hints

Refreshers: borders.

padding.

border-radius.

How it works

Heading and role

Step 3 of 5

Style the heading and the role label.
Then accent one role with an attribute selector.

Instructions

In style.css:

Add a rule like [data-role="engineer"] { ... } with a distinct color or border.

Hints

Tip: also style .card h2 with a color and a tweaked margin so the name pops.

And style .role with a color (optionally text-transform: uppercase) so it reads as a label.

[data-role="engineer"] matches only cards with that exact value.

See Attribute selectors.

How it works

Cards side by side

Step 4 of 5

Make cards sit next to each other.
Then center the page with a max-width.

Instructions

In style.css:

On .card, set display: inline-block and a width, like 200px.
On .card, set a small margin so cards do not touch.
On body, set max-width: 960px and margin: 0 auto.

Hints

The max-width with margin: 0 auto is the classic centering trick.

See CSS Inline-Block.

How it works

Add hover and alternating rows

Step 5 of 5

React to the cursor on hover.
Then tint every odd card with :nth-child(odd).

Instructions

In style.css:

Add .card:hover { ... } changing background or border.
Add .card:nth-child(odd) { ... } with a different background tint.
Optional: add cursor: pointer on hover.

Hints

:nth-child() accepts odd, even, or formulas like 2n+1.

See CSS Pseudo-classes.

How it works