My checklist
Web Adventures · Week 6

CSS Colour Magic

Aim: Use CSS to change colours, fonts and page appearance.

New coding words

  1. CSS
  2. style
  3. selector
  4. property
  5. value

What the coding words mean

  1. CSS: The language used to control how a webpage looks.
  2. style: A rule that changes the appearance of part of a page.
  3. selector: Chooses which HTML elements a CSS rule will change.
  4. property: The feature being changed, such as color.
  5. value: The new setting given to a property, such as purple.
Code along

CSS Colour Magic

This code creates a webpage and uses CSS to give it a light-yellow background, an Arial-style font and coloured text.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Mini project

Colourful Animal Poster

This code creates a centred animal poster with a light-blue background and differently coloured headings.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Save your finished mini project

Select Download my work and save the file as week_6_animal_poster.zip. Extract this .zip file to keep your HTML, CSS and JavaScript files together, then open index.html in a browser to view your webpage.

Debugging detective

Chi Opara, your course guide

Knowledge check

Question 1

Which language controls how a webpage looks?

Question 2
Web codecolor: blue;

In color: blue;, what is the property and what is the value?

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 6?

Your completion and mood are saved only in this browser.