16 min read

Styling the Header and Footer

Brand colours, the logo, spacing and a footer that sits neatly at the bottom — the frame that repeats on every page.

The Frame Around Every Page

The header and footer appear on every page, so they carry the brand : the logo, the tea-brown colour and consistent spacing. Because the CSS is in one file, styling them once styles them on all five pages.

What the browser shows

Try it:

Change the footer's text-align to left. Change the header background to #2B1D14 (darker) — does the logo still stand out?

body { margin: 0; } removes the browser's default gap around the page, so the header touches the edges. Keep the footer text small but readable (about 0.9em) and centred. Make footer links a light colour that contrasts with the dark background. Use the same colours as your colour scheme, ideally through CSS variables.

Practice

Which selector changes only the links inside the footer?

The Frame Around Every Page

The header and footer appear on every page, so they carry the brand : the logo, the tea-brown colour and consistent spacing. Because the CSS is in one file, styling them once styles them on all five pages.

What the browser shows

Try it:

Change the footer's text-align to left. Change the header background to #2B1D14 (darker) — does the logo still stand out?

Good Practice

body { margin: 0; } removes the browser's default gap around the page, so the header touches the edges. Keep the footer text small but readable (about 0.9em) and centred. Make footer links a light colour that contrasts with the dark background. Use the same colours as your colour scheme, ideally through CSS variables.

Practice

Which selector changes only the links inside the footer?