CSS / INTERACTIVE PRACTICE

Style a reading card

Give a simple card readable text and comfortable spacing.

Jump to editor ↓

Why this practice comes now

You have learned selectors, text styling, and the box model. Use them to make one readable card before moving on to layout systems.

Concepts to recall
  • Class selectors — Match the class names in the supplied HTML.
  • Readable text — Font size and line height control different aspects of reading.
  • Box dimensions — Padding is inside the border; border-box includes both in the width.

Start with one action

In the CSS editor, find .reading-card and add its inner spacing first. The preview updates as you type. Use Mobile and Desktop to compare widths, then Check solution to see which requirements pass. No Flexbox or Grid is needed.

Your mission

Edit only CSS; the HTML is supplied. .reading-card selects the whole card and .note selects its paragraph. Keep the starter body and heading rules, including the page's 16px padding. Use View target to compare one finished example; colors do not need to match. Checks test both 320px and 800px widths.

  1. Give .reading-card 24px of padding on every side and a visible solid border at least 1px wide.
  2. Make the card fill its available width, with a maximum width of 400px.
  3. Give .note a font size of 18px and a line height of at least 1.5.
Progress loads in this browser

Your code and completion are saved in this browser. Pass all solution checks to complete this practice in My progress. Editing or resetting code keeps your completion.

Live preview

These controls resize both your preview and the target. Checks always test both widths. Scroll within a preview to inspect the full layout.

Preview supports text, headings, and layout elements with classes. Scripts, links, forms, and external resources are disabled.

Target preview

Target classes and control inner spacing, borders, and width. This reference stays unchanged as you edit. Match the layout; your text and colors can be different.

Mobile target · 320px

Optional: save your card to work on your computer. Edit styles.css and refresh index.html to see your changes; no JavaScript is needed. How to run it on your computer →

Stuck? Open one hint at a time, try a change, and check again before opening the next. The complete answer stays in the separate explained solution.

Hint 1

Which kind of spacing belongs inside a border?

Hint 2

Use width for the space the card fills and max-width to cap its growth. Does the box sizing include padding and border?

Hint 3

Compare .note with the text requirements. Set its font size and a unitless line height separately, then check both widths for overflow.

See the explained solution
.reading-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  border: 1px solid #6366f1;
}
.note {
  font-size: 18px;
  line-height: 1.5;
}

Padding creates space inside the card. Border-box includes padding and border in its width; the preview also supplies this default. The flexible width fills a narrow screen, and max-width stops growth on larger screens. The note class changes only the paragraph. Add these rules to the starter CSS, then run the checks.

Choose another practice →