Year 8 · Autumn 2

Building the Web · Lesson 3 of 5

CSS: colours, fonts and layout

PracticalTopic 16 The web

Year 8 · Building the Web · Lesson 3 of 5

You will learn to

  • Explain the three parts of a CSS rule: selector, property and value.
  • Link a style.css file to a page with a link tag in the head.
  • Use CSS to change the colour, font and size of text.
  • Predict what a rule will change before you refresh the page.

Year 8 · Building the Web · Lesson 3 of 5

Success criteria

You have got it when you can say:

  • I can point to the selector, the property and the value in a CSS rule.
  • I can change the colour and font of my headings from one stylesheet.
  • I can predict what a rule will change, then refresh to check.
  • I can explain why one stylesheet can style many pages.

Year 8 · Building the Web · Lesson 3 of 5

Retrieval starter

Questions from before. Write your answers, then show them.

  1. Last lesson

    404 means…

    A The server crashedB OKC Not found

    C. Not found

  2. Last unit

    Why does an LED need a resistor?

    A To make it a different colourB To store electricityC To limit the current so it doesn't burn out

    C. To limit the current so it doesn't burn out

  3. Earlier this unit

    When you search, a search engine looks in…

    A Your browser historyB The live web, right thenC Its index, built earlier by crawlers

    C. Its index, built earlier by crawlers

Year 8 · Building the Web · Lesson 3 of 5

Key words

CSS
Language that styles how web pages look.
URL
The full web address of something online.
Protocol
A set of agreed rules for communication.
HTML
Markup language for the content of web pages.

The explanation · step 1 of 1

CSS: the look

CSS says how elements look. One file can style a whole site.

h1 {
  color: #C0392B;
  text-align: center;
}
  1. Selector: which elements (h1).
  2. Property: what to change (color).
  3. Value: what to change it to (#C0392B, a brick red in hex RGB).

Year 8 · Building the Web · Lesson 3 of 5

Quick quiz · 1 of 3

Which controls how a page looks?

  1. A HTML
  2. B CSS
  3. C DNS

B. CSS

CSS = style. HTML = content and structure.

Year 8 · Building the Web · Lesson 3 of 5

Quick quiz · 2 of 3

The web and the internet are…

  1. A The web is a service that runs on the internet
  2. B The internet runs on the web
  3. C The same thing

A. The web is a service that runs on the internet

The internet is the network. The web is pages over HTTP, one of many services using it.

Year 8 · Building the Web · Lesson 3 of 5

Quick quiz · 3 of 3

In <img src="cat.png" alt="A sleeping cat">, alt is…

  1. A A CSS property
  2. B An attribute
  3. C A tag

B. An attribute

Attributes sit inside the opening tag as name="value". alt describes the image for screen readers.

Year 8 · Building the Web · Lesson 3 of 5

Exit ticket

Answer on paper before you go. Then check.

  1. A box has width 100px, padding 10px, border 2px, margin 5px. How wide is it on screen, from border edge to border edge?

    A 112pxB 124pxC 134px

    B. 124px Content + padding on both sides + border on both sides: 100 + 20 + 4 = 124px. Margin is outside the border.

  2. The padlock in the address bar tells you…

    A The site has no virusesB The site is honestC The connection is encrypted with HTTPS

    C. The connection is encrypted with HTTPS It proves the domain and encrypts the traffic. It says nothing about honesty.