Unit 2 · Stage 2

Style Your Header

Your page has a body style now. Next you will style the header at the top: the big title and your name line. This is the first thing anyone sees, so let us make it stand out. (pause on a highlighted word to see what it does)

1 The header is its own section

In your HTML, the <header> tag groups the top of the page: the title and your name. To style it, you write a rule with the selector header, just like you wrote one for body.

Native youth in tech: the header is your banner. This page carries your name into a field where very few Native people are seen. Put it where the world will notice.

2 Color and space for the header

Two properties give the header its look: a background color, and padding to keep the text from crowding the edges.

What this code means

background-color: The color that fills the header bar. #50586C is a deep slate gray.
padding: Space inside the header, between its edges and the text. 20px gives the title room to breathe so it does not touch the sides.

🎮 Try it: inside your <style>, under the body rule, add a header rule with background-color: #50586C; and padding: 20px; then press ▶ Run.

🤔 Quick check before you go on

What CSS property changes how big your text is? Type it, then press Submit to unlock the next steps.

3 Make the title big and bold

Your <h1> is the main title. Style it so it is large, light-colored against the dark header, and bold.

What this code means

font-size: How big the text is. 50px makes a strong, readable title.
color: The color of the text itself. #f9f7f8 is almost white, so it stands out on the dark header.
font-weight: bold makes the letters thick and heavy.

🎮 Try it: add an h1 rule with font-size: 50px;, color: #f9f7f8;, and font-weight: bold; then Run.

4 Style your name line

The <h4> under the title holds your name. Give it a color and a smaller size so it sits nicely under the big title.

🎨 Make it yours: #ec65f8 is a bright pink. Swap it for a color from your Tribal Nation's flag or regalia. Try #2D5016 (forest green) or #C8A24B (gold).

🎮 Try it: add an h4 rule with color: #ec65f8; and font-size: 18px; then Run. Then change the pink to a color that feels like you.

✓ Finish this stage

To complete Stage 2, your header needs a background color and your h1 needs a large font size. Press Check my work when you are ready. This opens Stage 3 and lets your teacher see that you finished.

YOUR CODE

PREVIEW