Week 28 — Styling with CSS — making it yours¶
At a glance
| Date | Friday, April 9, 2027 |
| Unit | 4 — Ship It |
| Big idea | HTML gives a page structure; CSS controls how that structure looks. |
| Goal | Students add a separate style.css file and leave with a page that feels personally designed but remains safe to publish. |
| Student accounts needed | None. School Google Drive only if already available. |
| Prep time | 5 minutes |
Why this lesson looks the way it does¶
Three Fridays have passed since Week 27. Assume students remember the feeling of building a page, not the syntax. The first move today is re-orientation: HTML is the skeleton; CSS is the outfit.
CSS can become an infinite rabbit hole. In this room, in 45 minutes, the goal is not mastery. The goal is a publishable two-file website: index.html plus style.css. Students need enough styling control to feel ownership before Week 29's live deployment.
CSTA 2026 standards¶
| Concept area | Connection |
|---|---|
| Algorithms & Design | Apply a design plan by choosing colors, spacing, and layout intentionally |
| Programming | Use selectors and declarations to change the presentation of HTML elements |
| Data & Analysis | Interpret code as rules that transform structured content into visual output |
| Systems & Security | Explain that a website may be made from multiple files requested by the browser |
| Computing & Society | Design for a real audience while avoiding private or identifying information |
"I can…" objectives¶
By the end of today, students can say:
- I can connect an HTML file to a CSS file.
- I can use CSS rules to change color, spacing, borders, and fonts.
- I can explain the difference between content and style.
- I can prepare my page for teacher review before it goes public.
Teacher prep — the 5-minute version¶
- Reopen the browser editor from Week 27 and make sure it supports HTML and CSS panes.
- Put this on the board:
Today: Rebuild → Style → Save for launch
- Create or reopen the shared
Unit 4 Drop Boxwith one folder per student code name if possible. - Decide the code-name format now: first name plus last initial is not ideal. Use safe public slugs such as
blue-otter,rocket-7,mango-lab, or student-chosen project names you approve.
Minute-by-minute run sheet¶
0:00–0:04 — Anchor¶
Say:
"Three Fridays ago, we learned that a web page is just files the browser can read. Last time, our pages had structure. Today we make them look intentional.
Quick memory check: what did
<h1>do? What did<p>do?"
Take answers. Then draw:
0:04–0:12 — Mini-lesson: one CSS rule¶
Show the same plain HTML page from Week 27. Then add this inside the <head>:
Say:
"This line is the bridge. It tells the browser, 'After you read my HTML, go get my style rules from this other file.' Real websites are almost never one giant file."
Then show style.css:
body {
background: #f5f7fb;
color: #222222;
font-family: Arial, sans-serif;
margin: 40px;
}
h1 {
color: #2457a6;
}
.card {
background: white;
border: 2px solid #2457a6;
border-radius: 12px;
padding: 16px;
max-width: 700px;
}
"A CSS rule has a selector and declarations. Selector: who are we styling? Declarations: what should change?"
0:12–0:36 — Paired build: style without chaos¶
Students start from this complete two-file version. It is intentionally small enough for younger students to copy and old enough for older students to improve.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card">
<h1>My Project Page</h1>
<p>Welcome to a page I built with HTML and CSS.</p>
<h2>What this page is about</h2>
<p>Write two safe sentences about your topic here.</p>
<h2>Three highlights</h2>
<ul>
<li>First interesting detail</li>
<li>Second interesting detail</li>
<li>Third interesting detail</li>
</ul>
</main>
</body>
</html>
style.css
body {
background: #f5f7fb;
color: #222222;
font-family: Arial, sans-serif;
margin: 40px;
}
.card {
background: white;
border: 2px solid #2457a6;
border-radius: 12px;
padding: 16px;
max-width: 700px;
}
h1 {
color: #2457a6;
}
li {
margin-bottom: 8px;
}
Require students to make exactly three style changes before they add anything fancy:
- Change the background color.
- Change the heading color.
- Change either border, spacing, or font.
Keep the design guardrails visible
Tell them:
"A page can be colorful and still readable. If your partner has to squint, your design is not done."
At 0:30, stop the room for a 60-second save check. Students should have two files named exactly index.html and style.css.
0:36–0:42 — Share-out¶
Project two pages with different moods.
"Same HTML idea, different CSS choices. That is the power of separating content from style. Which rule changed the feeling of the page the most?"
0:42–0:45 — Teaser + prompt¶
"Next Friday is the big one. These files leave the editor and go onto a real web server. You will get a real URL. Not a screenshot. Not pretend. A real address."
Tiered challenges¶
🟢 Starter — grades 5–6¶
Use the starter code exactly. Change only these values in style.css:
Try safe color names first: lightblue, lavender, white, darkgreen, purple.
🟡 Builder — grades 7–8¶
Add a button-style link:
.button {
display: inline-block;
background: #2457a6;
color: white;
padding: 10px 14px;
border-radius: 8px;
text-decoration: none;
}
🔴 Extender — grades 9–10¶
Add a simple responsive layout:
Then explain to a younger student what max-width does without using the word "responsive."
Share-out prompt¶
"Name one CSS rule you changed and describe exactly what changed on the page."
🤔 Think About This¶
What would you want someone to feel in the first five seconds on your page? Curious? Calm? Excited? Clear? Notice one design choice that creates that feeling.
🔌 Unplugged Plan B — if the internet is down¶
Run this as a design studio. It still prepares students for launch.
| Time | Activity |
|---|---|
| 0:00–0:04 | Anchor: HTML is structure; CSS is style |
| 0:04–0:10 | Show printed examples of the same content with different colors/layouts, or draw two versions on the board |
| 0:10–0:25 | Students create a paper style guide for their page: background color, heading color, font mood, border style, spacing notes |
| 0:25–0:35 | Pair critique using two questions: "Can I read it?" and "What feeling does it create?" |
| 0:35–0:42 | Students revise the paper design and write three CSS rules in pseudocode |
| 0:42–0:45 | Teaser: next online class becomes deployment day |
Collect style guides so students can type quickly next time.
Common problems & fixes¶
| Problem | Fix |
|---|---|
| CSS does not affect the page | Check the <link rel="stylesheet" href="style.css"> line and the exact file name. |
| Student writes CSS inside the HTML body | Move it to style.css and restate: HTML content here, CSS rules there. |
| Colors make text unreadable | Use the squint test or partner test; require dark text on light backgrounds or light text on dark backgrounds. |
| Student wants animations before finishing content | Require title, two paragraphs, and three list items first. Content earns decoration. |
| File names have spaces or capitals | Rename to exactly index.html and style.css now; deployment is less forgiving than the editor. |
| Student forgot everything after break | Give them the starter and one success in two minutes. Confidence first, syntax second. |
Vocabulary¶
- CSS — the language used to style HTML pages
- Selector — the part of a CSS rule that chooses what to style
- Declaration — one style instruction, such as
color: blue; - Stylesheet — a CSS file connected to an HTML file
- Readable — easy for a real person to see, scan, and understand
Reflection — fill in after class¶
- Did students understand two files working together?
- Which designs need readability correction before publishing?
- Are file names clean enough for deployment?
- Which students need help submitting files next week?
Next week: Week 29 — Going live — deploy to Azure