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.

✍️ Put the header rule right under the body rule, inside your <style>. Not sure how it should look? Use the example below, then press ▶ Run.

header {
  background-color: #50586C;
  padding: 20px;
}

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

✍️ Add the h1 rule right under your header rule. Use the example below if you need it, then press ▶ Run.

h1 {
  font-size: 50px;
  color: #f9f7f8;
  font-weight: bold;
}

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

✍️ Add the h4 rule, then change the color to one that feels like you. Use the example below to start, then press ▶ Run.

h4 {
  color: #ec65f8;
  font-size: 18px;
}

✓ 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