Unit 2 · Stage 1

What Is CSS?

Your HTML page is built. Now you will use CSS to give it style: colors, fonts, and spacing. The editor already has your profile page in it. Play with it, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap from Unit 1. You already know the tags that build a page: <!DOCTYPE html>, <html>, <head>, <title>, <body>, the headings <h1> through <h6>, and paragraphs <p>. That is the skeleton of every web page. In Unit 2 you keep all of it and add CSS on top to style it. Need a refresher on any tag? Open 📖 Glossary at the top. Every tag you learned in Unit 1 lives there.

1 HTML builds, CSS styles

Think of a house. HTML builds the structure: the walls, floors, and rooms. CSS styles the appearance: the paint, the furniture, the design choices. CSS stands for Cascading Style Sheets.

🌐 Native youth in tech: right now, less than 1% of tech workers identify as Native American. When you learn CSS, you are gaining a skill that very few Native people currently hold, and that your community needs.

2 The parts of a CSS rule

A CSS rule has three parts: a selector (what to style), a property (what to change), and a value (the setting). You write your CSS inside a <style> tag in the <head>.

What a rule looks like

body { background-color: #DCE2F0; }: body is the selector, background-color is the property, and #DCE2F0 is the value. Every line inside the rule ends with a semicolon ;.
The semicolon rule: Every CSS line ends with a semicolon. Forgetting it is the most common CSS mistake. If your styles stop working, check for a missing ;.

🎨 What is that #DCE2F0 code? It is a hex color. The # is followed by 6 characters that mix red, green, and blue light. That tiny code can make over 16 million different colors, so you never have to memorize any of them. Play with the full color spectrum and copy any hex code you like here: w3schools.com color picker.

Not into hex yet? CSS also understands about 140 plain color words. You can just write tomato, teal, gold, navy, or rebeccapurple instead of a # code, and it works the same way.

🎮 Try it: in the editor, inside the empty <style> tags, add body { background-color: #DCE2F0; } and press ▶ Run to watch the page turn light blue.

3 Finish the body rule

A full body rule sets more than the background. Add a font, remove the default page spacing, and center everything.

What this code means

background-color: The color behind everything on the page.
font-family: The typeface for your text. Arial, sans-serif means use Arial, or any plain sans-serif font if Arial is missing.
margin and padding: Space outside and inside an element. Setting them to 0 on the body removes the browser's default gap around the edge. You will style spacing in depth in a later stage. For now, just know that 0 clears that default gap so your design starts clean.
text-align: center lines your text up in the middle of the page.

🤔 Quick check before you go on

What does CSS do to a web page? Type one word, then press Submit to unlock the next steps.

4 Color values in CSS

You can name a color three ways: a hex code like #DCE2F0, a color name like tomato, or an RGB value like rgb(220, 226, 240). Hex codes are the most common.

🎨 Try your own color: change #DCE2F0 to a color that means something to you, like a color from your Tribal Nation's flag or regalia. Try #2D5016 (forest green) or #8B1538 (dark red).

🎮 Try it: change the background-color value to a color that feels like you, then press Run.

5 Make it your own

This profile is about you. In the editor, replace [Your Name] in the <h4> with your real name, and fill in the card paragraphs with your own words. Then press Run.

<h4>Maria Whitehorse • Relentless Feather</h4>

✓ Finish this stage

To complete Stage 1, your page needs a CSS body rule with a background color and a font. Press Check my work when you are ready. This opens Stage 2 and lets your teacher see that you finished.

YOUR CODE

PREVIEW