Style the header and the footer
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.
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}
| Property | What it does | Example value |
|---|---|---|
| text-align | places the text | center |
| background-color | fills the box | darkblue |
| color | sets the letter colour | white |
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.