CSS Selectors

Choose elements and apply styles.

CSS

.card {
  max-width: 40rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
}

Explanation

Selectors target elements. A class selector begins with a period. Keep text contrast and responsive widths in mind.

Explore the dry run

Guided walkthroughReady

1.card {

2 max-width: 40rem;

3 padding: 1.5rem;

4 border: 1px solid #ddd;

5}

Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.

View the complete dry-run table

Prepared trace of the published program. Some rows group repeated iterations.
What happens	State after step	Output so far
Select elements whose class is card.	`—`	—
Limit their width to 40rem.	`—`	—
Add inner spacing of 1.5rem.	`—`	—
Draw a one-pixel light border.	`—`	—