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.

✍️ Add the h2 rule and the p rule inside your <style>. Not sure how they should look? Use the example below, then press ▶ Run.

h2 {
  color: #50586C;
  font-size: 20px;
  margin-top: 0;
}
p {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}

🤔 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.

✍️ Add the .card-author rule under your p rule. Use the example below if you need it, then press ▶ Run.

.card-author {
  font-size: 13px;
  color: #ec65f8;
  font-style: italic;
  margin-top: 12px;
}

✓ 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