Unit 2 · Stage 5

Card Typography

Your cards have pictures. Now make the words inside them easy and beautiful to read. Good typography is what makes a page feel finished. (pause on a highlighted word to see what it does)

1 Headings and paragraphs

Style the <h2> heading and the <p> text inside each card so they are clear and comfortable to read.

What this code means

color: The text color. The heading gets a deep slate, the paragraph a softer gray.
font-size: How big the text is. Headings are larger than paragraph text.
line-height: The space between lines of text. 1.6 gives paragraphs room to breathe and is easy on the eyes.
margin-top: 0 on the heading pulls it snug under the image instead of leaving a gap.

🎮 Try it: add an h2 rule (color: #50586C;, font-size: 20px;, margin-top: 0;) and a p rule (color: #555;, font-size: 15px;, line-height: 1.6;) then press ▶ Run.

🤔 Quick check before you go on

What property sets the space between lines of text for easy reading? Type it, then press Submit to unlock the next steps.

2 Sign your work

Each card now ends with a line that reads by [Your Name], marked with the class card-author. Style it small, italic, and pink so it reads like a signature.

What this code means

font-style: italic slants the letters, the classic look of a signature or a quote.
color: #ec65f8 is the same pink as your name in the header, tying the page together.
margin-top: A little space above the line so it sits apart from the paragraph.

Native youth in tech: put your name on your work. Native creators have always signed their art, their beadwork, their stories. Your code is no different.

🎮 Try it: add a .card-author rule with font-size: 13px;, color: #ec65f8;, font-style: italic;, and margin-top: 12px; then Run.

✓ Finish this stage

To complete Stage 5, your paragraphs need a line-height and your author line needs font-style: italic. Press Check my work when you are ready. This opens Stage 6 and lets your teacher see that you finished.

YOUR CODE

PREVIEW