Stage 1: What Is CSS?

STEP 1

HTML Builds. CSS Styles.

In Unit 1 you built a webpage with HTML - headings, lists, links. But it looked plain. That's where CSS comes in.

HTML

Builds the structure - the walls, floors, and rooms of a house

CSS

Styles the appearance - the paint, furniture, and design choices

CSS stands for Cascading Style Sheets. Every website you've ever visited uses CSS to control how it looks.

🌐 Native Youth in Tech

Right now, less than 1% of tech workers identify as Native American. When you learn CSS, you're gaining a skill that very few Native people currently hold - and that your community needs.

STEP 2

CSS Anatomy: Selector, Property, Value

Every CSS rule has three parts:

body {
background-color: #DCE2F0;
}

Selector - which HTML element to style. Writing body targets the entire page. Writing h1 targets every heading 1. Writing .card targets any element with that class name.
Property - what aspect of the element you want to change. background-color controls the fill color. font-size controls how large the text appears. Each property does exactly one thing.
Value - the specific setting for that property. #DCE2F0 is a color. 24px is a size. bold is a weight. The value always goes after the colon : and before the semicolon ;.

🎯 The Semicolon Rule

Every CSS declaration ends with a semicolon ;. Forgetting it is one of the most common CSS mistakes - if your styles don't work, check for a missing semicolon!

STEP 3

Write CSS Inside a <style> Tag

In this unit, you'll write your CSS inside a <style> tag in the <head> of your HTML. This keeps everything in one file while you're learning.

👉 Type this in the code editor → <!DOCTYPE html>
<html>
<head>
  <title>This Is Me In Tech</title>
  <style>
    body {
      background-color: #DCE2F0;
    }
  </style>
</head>
<body>
  <h1>This Is Me In Tech</h1>
</body>
</html>

Look at the preview → the page background should now be a soft blue-gray!

STEP 4

Add font-family and Spacing

Let's add two more properties to the body rule. CSS rules can have as many properties as you need - just add more lines inside the curly braces.

👉 Update your body rule to include all four properties: body {
  background-color: #DCE2F0;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

font-family: Arial, sans-serif - sets the font for the entire page. Arial is the first choice. sans-serif is the fallback - if Arial is not available on someone's device, the browser automatically uses the next clean, readable font it has. Listing a fallback is considered good practice.
margin: 0 - removes the default outer gap browsers add around the page. Without this, there's a visible white gap between your content and the browser edge. Setting it to 0 lets your header and background color stretch completely edge to edge.
padding: 0 - removes the default inner gap browsers add inside the page. Together with margin: 0, these two lines give you a clean, full-bleed canvas to style exactly the way you want.
text-align: center - centers all text on the page by default. Individual sections can override this later - for example, card text might be left-aligned - but setting center on body means headings and labels are centered without you having to repeat it everywhere.

STEP 5

Color Values in CSS

CSS colors can be written in a few ways:

Hex codes - #DCE2F0. The # tells CSS it's a hex color. The 6 characters after it are split into three pairs: the first two control red, the next two control green, the last two control blue. Values go from 00 (none of that color) to FF (full of that color). So #FF0000 is pure red, and #DCE2F0 is a soft blue-gray. Hex is the most common format you'll see on the web.
Color names - blue, white, coral. Browsers recognize 140+ named colors. Easy to type, but you have less control over the exact shade.
RGB - rgb(220, 226, 240). Same idea as hex - three numbers for red, green, and blue - but written as decimal values from 0 to 255. This is the same color as #DCE2F0 just written in a different format.

💡 Try Your Own Color

Change #DCE2F0 to a color that means something to you - your favorite color, or a color from your Tribal nation's flag or regalia. Try #2D5016 (forest green) or #8B1538 (dark red).

STEP 6

Add Your Page Content

Now add the HTML structure for your profile page inside <body>. We'll style it all in the coming stages.

👉 Replace your <h1> with this full body content: <header>
  <h1>This Is Me In Tech</h1>
  <h4>[Your Name] • Relentless Feather</h4>
</header>

<main class="container">
  <section class="card">
    <h2>My Future in Tech</h2>
    <p>I want to learn everything about technology...</p>
  </section>

  <section class="card">
    <h2>When I Learn to Code</h2>
    <p>When I learn to code, I can see myself...</p>
  </section>

  <section class="card">
    <h2>Helping My Community</h2>
    <p>I want to use my skills to help...</p>
  </section>
</main>

STEP 7

Make It Your Own!

Before moving to Stage 2, personalize your page:

Replace [Your Name] in the <h4> with your actual name
Try changing background-color to a color you love
Fill in the <p> placeholder text with your own words

🌟 Stage 1 Complete!

You understand what CSS is, how to write a rule, and how to style a page background. In Stage 2, we'll style the header section to make it pop!