CSS Lists — Code Challenge

How it works

• List markers communicate a relationship between items. CSS can change marker style and spacing while HTML preserves list semantics.
• Typography should remain readable when the browser zooms or a visitor substitutes their own font. Start with comfortable line length and line height.
• Inspect the specific property in the example, then compare the heading, body text, and badge. They may inherit different values.

Your task

Use the HTML below to explore this rule: List markers communicate a relationship between items. CSS can change marker style and spacing while HTML preserves list semantics. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.

ul { list-style: square; padding-inline-start: 1.5rem; }
li + li { margin-top: .5rem; }

A solution to compare

The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.

<section class="card"><h2>Bring to the workshop</h2><ul><li>A small repair project</li><li>Any matching spare parts</li><li>A question for the group</li></ul></section>

body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }

/* This lesson */
ul { list-style: square; padding-inline-start: 1.5rem; }
li + li { margin-top: .5rem; }

List markers communicate a relationship between items. CSS can change marker style and spacing while HTML preserves list semantics.