1 - Start ~4 mins
You already know how to build the bones of a page: headings, paragraphs, lists and pictures. Today you style that page. You will change colours, fonts and spacing, first with the block controls and then by typing the CSS yourself. By the end you will see that the words stay the same while the look of the page changes completely.
Open on the board with a plain page and the same page restyled in two different colour schemes, so students see the content stay put while the look flips. Remind the class that their page from the earlier sessions should still be on the step; if a student's page is missing, they can use the starter page already loaded in the interactive. Devices and browsers ready before the lesson starts so the build time is not eaten by logins.
2 - Content and Style ~4 mins
A web page has two jobs. HTML holds the content: the headings, paragraphs, lists and pictures. CSS holds the style: the colours, fonts, sizes and spacing. Change the CSS and the page looks different, but the words stay exactly the same.
Name the split out loud: HTML is what is on the page; CSS is how it looks. Point at the layers diagram and keep the language plain. Keep this beat short so students reach the builder quickly. Do not open the code editor yet; the point is the idea, not the syntax.
3 - Hands-on: Style, Then Type ~17 mins
Open the Web Page Builder. Use your page from earlier sessions if it is there. If not, use the starter page already loaded.
Phase 1: style with blocks and read the CSS
- Change one style with the block controls (start with a page colour).
- Open the CSS tab and find the rule that just changed. Name the property (for example background-color, color, font-size or text-align).
- Optional: repeat for the font or text size. Checkpoint: name at least one property before you type anything.
Phase 2: type a colour yourself
Do not press go back to blocks after you type. It deletes your CSS edits.
- Stay in the CSS tab. Find a colour value in a rule (the part after the colon).
- Replace it with #1b5e20 for a deep green, or #0d47a1 for a strong blue, and watch the page update. A colour code starts with # and uses six characters (0 to 9 and a to f).
- If a rule stops working, compare what you typed with a rule that still works. Check for a missing colon or semicolon, or a colour that is not a real CSS colour.
Must-do: one hand-typed colour change that works. If you have time, also change a size (keep the unit such as px and only change the number).
Interactive activity
This is the first lesson where students write code. CSS is a gentle place to start: there are no closing tags to mismatch, and a typo usually spoils only one rule rather than the whole page. Expect typos and treat them as the lesson, not an interruption. Before anyone types, warn the class out loud: the go back to blocks button discards every hand edit you have made.
Do not force a fresh starter workspace on this step. Saved page state from earlier sessions should carry into the builder. There is no startWorkspace on this step, so carried or just-styled page state is not wiped. If a student's page is missing, they use the starter page the builder already shows; only then rebuild a plain Home page with them.
Predict beat (before Phase 2): with one colour rule visible on the board, ask the class what they think will happen to the page if you change only the colour value and leave the property name alone. Take two quick predictions, then type the change so they see the page update match (or challenge) what they said.
Suggested timing
- Minutes 1 to 10: Phase 1 only. Style with the block controls, reading the CSS tab after each change, until students can name one property on the board checkpoint.
- Minutes 11 to 14: whole-class colour change on the board (predict, then type) so everyone sees the page update from a typed value.
- Minutes 15 to 24: students type their own colour change as the must-do; circulate and coach from the error, not from the answer. Size change is optional here if they finish early, otherwise it waits for the theme stretch in the next step.
Teaching tips
When something breaks, run the named routine: read the rule, find the line, form a hypothesis (missing semicolon? wrong property name?), test it, revert if wrong. Common slips are a missing semicolon at the end of a declaration, a colour written as a description (like deep green) instead of a real CSS colour name or code (like green or #1b5e20), and editing the HTML tab by mistake. Keep students in the CSS tab for this lesson.
Optional stretch while circulating: ask a settled student to change only two characters inside a hex value and watch what happens, or to try a second property such as padding or margin. Keep the full debug checklist (colon, semicolon, bad colour) as circulation coaching, not a student checklist to finish before the theme task.
Differentiation
Students who settle quickly can try a size change or a second property such as padding or margin. Students who freeze on a typo can copy one working rule from the board and change only the value. The class must-do is one working hand-typed colour; size is stretch, not a barrier.
4 - Your Turn: Restyle to a Theme ~9 mins
Stay on your page. Pick a theme and restyle it by typing the CSS yourself. Keep the content. Change only the look. If your page is missing, reopen the builder and load your saved page, or use the starter page.
Theme ideas:
- Dark mode: dark background, light text
- GAA club colours: two strong team colours and a clear heading
- Calm weather page: soft blues and greys, comfortable reading size
- Poster style: bold heading, high contrast, generous spacing
Done looks like this:
- You have typed or edited at least two CSS properties by hand: the page background and the text colour
- Optional stretch: also change a heading size or spacing so the whole page feels like one theme
- If a rule broke, you fixed it by comparing what you typed with a rule that still works
- Your page is saved so it will still be here next lesson
Save steps: click Save, check the page name, then refresh and confirm the page reappears.
A partial theme still counts if you can point to the two properties you changed.
Interactive activity
Keep this as independent application of the same skill, not a new idea. Circulate for three look-fors: is the student typing in the CSS tab rather than only using blocks; can they name the property they just changed; when something breaks, do they read the rule before clicking around. If a student reaches for go back to blocks in a panic, pause them and ask what the last change was, then undo that one line instead.
Do not reload a blank startWorkspace on this step (there is none in the config). Students should stay on the page they just styled in the previous activity. If someone lost their tab, reopen the builder and load their saved page; only use the starter page when nothing saved is available.
Before they finish, model the save steps on the board as well (Save, check page name, refresh to confirm). The student copy already lists those steps so late joiners are not blocked.
Stronger students who finish the two required edits can take the stretch (heading size or spacing) so the fuller theme is an extension, not a barrier. Students who only managed colour in the last step can complete text colour here as their second property.
5 - Make Sense ~3 mins
Pull it together. The HTML still holds the content you built earlier. The CSS holds the look. When you typed in the CSS tab, you were writing the same rules the blocks had been writing for you all along. That is what style separated from content means: one place for the words, another for the colours, fonts and spacing.
Take two quick contributions: one student names a CSS property they changed, another explains what stayed the same on the page when the style flipped. If anyone lost work to go back to blocks, name it kindly as a lesson about one-way editing rather than a mistake to hide. Keep this beat to three minutes so the recap stays tight.
Unlock the full learning experience
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.