Home›Lesson Plans›Computer Science›Web Development · Grade 7

CSS & Styling

Seventh graders learn the split that powers the web: HTML gives a page its structure, and CSS gives it its style — colors, fonts, spacing, and layout. They sort structure from style, then restyle a page.

Grade 7CSS & Styling50 minutes1 class periodCSTA / ISTEExplicit teaching4 StandardsCSTA
Start the Lesson
Assign or share this lesson
Share to Google Classroom Share to Microsoft Teams

Copy link works with Canvas, Schoology, Moodle and any other LMS — paste it in as a resource or assignment.

Lesson at a Glance

Everything you need before the bell rings

Learning Objectives

Students will be able to…

  • ✓Tell structure from style.
  • ✓Change colors & fonts with CSS.
  • ✓Use a selector and a property.
  • ✓Restyle a page.
Essential Question

How do HTML and CSS work together to build a page?

0
Lesson Phases
0
Vocabulary Terms
0
Standards Aligned
0
Interactive Task
Sort It · Interactive

HTML or CSS?

Project this and sort each item into HTML (structure) or CSS (style).

🎨 Sort each — is it HTML structure or CSS style?Try it
🧱 HTML (structure)
🎨 CSS (style)
Tap an item, then tap a box.
The Lesson · Use → Modify → Create (a coding progression with Unplugged practice)

50 minutes, five moves

Tap any phase to open the teacher moves and student actions.

1

Hook — Same Page, New Look

6 min

How can two pages have the same words but look totally different?

👩‍🏫 Teacher Moves

  • Show one page in two styles.
  • Ask what changed.
  • Set the goal.

🎒 Student Actions

  • Look.
  • Guess.
  • Get ready.
2

Use — CSS & Styling

12 min

Students use CSS.

👩‍🏫 Teacher Moves

  • Send students to HTML or CSS?
  • Sort each item.
  • Note structure vs style.

🎒 Student Actions

  • Sort.
  • Say.
  • Note it.
3

Modify — Restyle It

13 min

Students modify.

👩‍🏫 Teacher Moves

  • Change a text color.
  • Make text bold.
  • Add spacing with a margin.

🎒 Student Actions

  • Change.
  • Bold.
  • Space.
4

Create — Style a Page

13 min

Students create.

👩‍🏫 Teacher Moves

  • Pick a color scheme.
  • Style the heading and body.
  • Preview the result.

🎒 Student Actions

  • Pick.
  • Style.
  • Preview.
5

Reflect — Reflect

6 min

Students close.

👩‍🏫 Teacher Moves

  • Say what HTML does.
  • Say what CSS does.
  • Complete the exit ticket.

🎒 Student Actions

  • Say it.
  • Say.
  • Complete the exit ticket.
Standards Alignment

Built to the standards you report on

Aligned to the CSTA K-12 Computer Science Standards and the ISTE Standards for Students.

CSTA
2-AP-16

Incorporate existing code and media, with attribution.

CSTA
2-AP-19

Document a program so others can follow it.

CSTA
2-AP-13

Decompose a problem (structure vs style) into parts.

ISTE
6 Creative Communicator

Design content for a purpose.

Differentiation

One lesson, every learner

Multilingual Learners

ELL / EMERGING READERS
  • Structure vs style cards.
  • Frame: “HTML = what, CSS = how it looks.”
  • Point to examples.

Support & Access

IEP / 504
  • Sort structure vs style only.
  • Change one color.
  • Use a style template.

Stretch & Extend

GIFTED / EARLY FINISHERS
  • Use a class selector.
  • Add a hover effect.
  • Make a responsive layout.
Materials

What to gather

  • 📽️Screen / board
  • 🎨HTML/CSS cards
  • 💻HTML or CSS?
  • 🌐A code editor
  • 📓Notebooks
  • 🎫Exit-ticket slips
Vocabulary

Key terms — hover for a quick definition

CSSthe language that styles web pagesstylethe look: color, font, spacing, layoutselectorwhat element the style applies topropertywhat you change (e.g. color)valuethe setting (e.g. blue)fontthe typeface of the textmarginspace around an elementlayouthow elements are arranged
Evaluate

Exit Ticket

Preview the three formative checks. Tap “Sample answer” to see what mastery looks like — hide them before you print for students.

QUESTION 1
What does HTML provide?
The structure of a page (headings, paragraphs).
QUESTION 2
What does CSS provide?
The style (colors, fonts, spacing, layout).
QUESTION 3
Is “text color is blue” HTML or CSS?
CSS (style).

Reflect: CSS & styling.

Have students name two things CSS can change on a page. A printable CSS worksheet is in the Computer Science library.

Study · Flashcards

Study the key terms

Tap a card to flip it, then rate whether you knew it. Built from this lesson’s vocabulary.

🃏 CS CSS and Styling (Grade 7)Flip
Card 1
Term
Tap to flip →
Meaning
0

Nice work!

Practice · Quiz

Check your understanding

A quick self-check with instant feedback, drawn from this lesson’s key terms.

📝 CS CSS and Styling (Grade 7)Quiz
Score: 0
1 / 6
Question 1
0%

Nice work!

Practice · Worksheet

Printable worksheet

A print-and-go review sheet with a built-in answer key. Tap “Show answer key” to reveal answers, or print the clean version for students.

🖨️ CS CSS and Styling (Grade 7)Print
Name: ________________________
Date: ____________

Part A · Write the word that matches each meaning

Word bank: CSS, font, layout, margin, property, selector, style, value
  1. what you change (e.g. color)
  2. what element the style applies to
  3. how elements are arranged
  4. the setting (e.g. blue)
  5. space around an element
  6. the typeface of the text
  7. the look: color, font, spacing, layout
  8. the language that styles web pages

Part B · Show what you learned

  1. What does HTML provide?
  2. What does CSS provide?
  3. Is “text color is blue” HTML or CSS?
Answer key — Part A: 1) property · 2) selector · 3) layout · 4) value · 5) margin · 6) font · 7) style · 8) CSS
Part B: 1) The structure of a page (headings, paragraphs). 2) The style (colors, fonts, spacing, layout). 3) CSS (style).