☰ Year plan · Communication Technology

My digital project (2): the style file

Week 11 · Unit 2, Lesson 3 My Digital Project for My School (2) · 3 lessons
1

Style the header and the footer

ICT Prep 2 Term 1, Unit 2, Lesson 3: pp. 70–72
GoalRead the header and footer rules of the style file line by line.
New words
formatting · setting the looks of text and boxes with CSSalignment · where text sits in its box: left, right or centrebackground colour · the colour that fills a box behind its textbold · thicker, heavier letters that stand out
Explanation

One style file formats both pages of the club project. Let us read its first part line by line. The rule for body says text-align: center, so text is centred in the page. The rule for header sets background-color: darkblue, so the bar is dark blue, color: white, so the letters are white, and a padding that gives the words some room inside the bar; next lesson explains padding. The rule for footer is almost the same as the rule for header, because both bars should match. That matching is consistency, which you met in Week 7. Because every page links to the same file, both pages get the same header and footer.

Css
1body {
2  text-align: center;
3}
4header {
5  background-color: darkblue;
6  color: white;
7  padding: 15px;
8}
9footer {
10  background-color: darkblue;
11  color: white;
12  padding: 15px;
13}
Worked examples
PropertyWhat it doesExample value
text-alignplaces the textcenter
background-colorfills the boxdarkblue
colorsets the letter colourwhite
Property by property: text-align: center puts the text in the middle. background-color: darkblue fills the bar with dark blue. color: white makes the letters white. The white letters on the dark blue have strong contrast, which you studied in Week 8.
Youssef wants the footer to be dark green but keep everything else. He changes one word, darkblue to darkgreen, in the footer rule only. The header stays dark blue. Rules are separate, so each can change alone.
Class activity

Copy the header rule on paper. Colour a small box to show what it makes. Then change the colours to another pair with strong contrast and write the new rule. Explain why your pair is easy to read.

Practice
1
What does text-align: center do?
2
What does background-color: darkblue do to the header?
3
Why are the header and footer rules almost the same?
4
Why are white letters on dark blue easy to read?