Stage 2: Style Your Header

STEP 1

Review: Where We Left Off

In Stage 1, you wrote your first CSS rule - you styled the body with a background color, font, and spacing. Your page has the structure, but the header still looks plain.

In this stage, you'll target three specific HTML elements and style them one by one: header, h1, and h4.

This Is Me In Tech

Your Name • Relentless Feather

This is what we're building - your styled header

STEP 2

Style the Header Background

Right now, the <header> has no styling - it blends in with the page. Let's give it a dark background that makes it stand out.

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

👉 Add this new rule after your body rule in the <style> tag: header {
background-color: #50586C;
padding: 20px;
}

Watch the preview - your header should now have a dark blue-gray background with extra breathing room around the text.

📐 What is padding?

padding adds space inside an element - between its edge and its content. Think of it like the mat inside a picture frame: the frame stays the same size, but the image has more breathing room. padding: 20px adds 20 pixels of space on all four sides (top, right, bottom, left). Without it, the header text would press right up against the edges of the background.

STEP 3

Style the h1 Heading

The title needs to be bold and easy to read against that dark background. Let's make it big, white, and bold.

👉 Add this rule below your header rule: h1 {
  font-size: 50px;
  color: #f9f7f8;
  font-weight: bold;
}

font-size: 50px - sets the text size to 50 pixels tall. Browsers default to around 32px for an h1, so 50px makes the title noticeably larger and more commanding. You're telling the browser: this is the most important thing on this page.
color: #f9f7f8 - a warm near-white. Pure white (#ffffff) can feel harsh against a dark background. #f9f7f8 has a tiny bit of warmth that makes it softer and easier on the eyes - a small detail that makes a real difference in readability.
font-weight: bold - makes the strokes of each letter thicker. Browsers already make h1 elements bold by default, but setting it explicitly means your intention is clear and it won't unexpectedly change if you switch fonts later.

🎨 Color and Identity

The colors you choose for your page are a form of self-expression. Many Native designers choose colors that connect to their land, regalia, or Tribal nation's palette. There's no wrong answer here - what colors feel like you?

STEP 4

Style the h4 Subtitle

The <h4> shows your name and "Relentless Feather." Let's make it pop with a bright accent color.

👉 Add this rule below your h1 rule: h4 {
color: #ec65f8;
font-size: 18px;
}

That pink-purple (#ec65f8) stands out beautifully against the dark header. Your page is starting to have real personality!

🖌️ Try Your Own Color

Don't like bright pink? Swap #ec65f8 for any hex color. Try #FFD700 (gold), #7FDBFF (sky blue), or #2ECC40 (green). Experiment!

STEP 5

Your Complete Header CSS So Far

Let's check that your <style> tag has all four rules in the right order:

body {
  background-color: #DCE2F0;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

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

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

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

If your preview matches the header preview at the top of this unit, you're good to go!

STEP 6

Make It Your Own!

Before moving to Stage 3, personalize your header:

Change #50586C to a background color that feels right to you
Try a different font-size for the h1 - what happens with 64px or 36px?
Swap the h4 color for something meaningful - your Tribal nation's colors, your favorite shade
Make sure your name is in the <h4> - replace [Your Name]!

🌟 Stage 2 Complete!

You just targeted specific HTML elements with CSS - header, h1, and h4. In Stage 3, we'll lay out the three cards side by side using Flexbox!