Week 9 · Unit 2, Lesson 2 Web Page Format (CSS) · 3 lessons
1
Why keep looks apart from content?
ICT Prep 2 Term 1, Unit 2, Lesson 2: pp. 56–62
GoalExplain why HTML and CSS are kept apart and list the benefits of CSS.
New words
HTML · the language that describes the content of a page, such as headings, paragraphs and picturesCSS · separate rules that say how the page looks: colours, sizes, fonts and spacingbrowser · the program that reads a page and shows it on the screentag · a word in angle brackets, such as the one that marks a heading
Explanation
Remember HTML from earlier years: it describes the content of a page, for example a heading, a paragraph and a picture, and the browser shows it. CSS is a separate set of rules for how the page looks: colours, sizes, fonts and spacing. Think of a recipe. The list of ingredients and the steps are the content. How the dish is served and decorated is the look. If you mix the two, changing the look means rewriting the recipe. Long ago, formatting was written inside HTML, with tags that set the font. For big sites this was slow to change, so a group that sets web standards created CSS, to separate the looks from the content. This brings many benefits, shown in the table.
Benefit
Why
saves time
you write the look once
faster loading
the browser keeps one copy of the rules
easy to change
edit once, every page follows
nicer and easier to read
designs are more careful
content kept apart from design
each can be changed alone
pages adapt to screens
CSS helps layouts fit phones and big screens
Worked examples
Omar bakes a cake from a recipe card. The card lists the ingredients and steps: that is like HTML. His sister decorates the cake with cream and cherries: that is like CSS. They can change the decoration without changing the card.
page (HTML)→style rules (CSS)→browser→styled page
A site has a hundred pages. The owner wants every heading to turn from black to blue. With old inline formatting, a hundred pages must be changed. With one CSS rule, one line is changed and all pages follow.
Class activity
Draw a recipe card on one side and a decorated dish on the other. Under them write which is HTML and which is CSS. Then choose two benefits of CSS from the table and explain each in one sentence to a family member.
Practice
1
What does HTML describe?
The content of a page, such as headings, paragraphs and pictures.
2
What does CSS describe?
How the page looks: colours, sizes, fonts and spacing.
3
Why does CSS make changes easier?
You edit one rule and every page that uses it follows.
4
Name two benefits of CSS.
For example saves time and loads faster (also easy to change, pages adapt to screens).
