Unit 3 · Stage 1

The Masthead

Every newspaper opens with a masthead: the bold banner across the top with the paper's name. You will build one for your own paper, The Native Voice. The editor already has the page. Play with it, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. In Unit 1 you built structure with HTML. In Unit 2 you styled it with CSS. Unit 3 puts both together to design a newspaper. Every tag and property you have learned lives in the 📖 Glossary at the top if you need a refresher.

1 A paper starts with its masthead

The masthead is the title banner at the very top. In your HTML it is a <header> with the class masthead, holding the paper's name and a tagline.

Native youth in tech: the Cherokee Phoenix, first published in 1828, was the first Native newspaper, printed in both English and Cherokee. When you build The Native Voice, you continue a long tradition of Native people telling their own stories.

2 Style the page and the banner

First set the whole page, then the dark masthead banner with a bold red line under it.

What this code means

font-family: Georgia, serif is a classic newspaper typeface. Serif fonts have small strokes on the letters, the traditional print look.
background-color: The dark banner color. #f4f1ea on the body is a warm off-white, like newsprint.
border-bottom: A line along just the bottom edge. 5px solid #b8232f is the bold red rule under the banner.
padding: Space inside the banner so the title does not touch the edges.

🎮 Try it: in the <style>, add a body rule (font-family: Georgia, serif;, background-color: #f4f1ea;) and a .masthead rule (background-color: #1a1a1a;, color: #ffffff;, text-align: center;, padding: 24px;, border-bottom: 5px solid #b8232f;) then press ▶ Run.

🤔 Quick check before you go on

What property adds space between the letters of a title? Type it, then press Submit to unlock the next steps.

3 The name and the tagline

Now style the big paper name and the small tagline under it.

What this code means

font-size: 52px makes the paper's name large and commanding, like a real front page.
letter-spacing: Adds space between letters. A little spacing makes a masthead feel classic and formal.
font-style: italic slants the tagline so it reads like a subtitle.

🎨 Make it yours: change The Native Voice in the HTML to your own paper name, and put your Tribal Nation in the tagline.

🎮 Try it: add a .masthead h1 rule (font-size: 52px;, margin: 0;, letter-spacing: 2px;) and a .masthead .tagline rule (margin: 6px 0 0;, font-style: italic;, color: #cfc8bd;) then Run.

✓ Finish this stage

To complete Stage 1, your .masthead needs a background color and the red border-bottom. Press Check my work when you are ready. This opens Stage 2 and lets your teacher see that you finished.

YOUR CODE

PREVIEW