Skip to content
Oak National Academy
Oak National Academy
View my library
0
Teachers
Pupils
New
New
Year 11
OCR

CSS fundamentals

I can style the content of web pages using a CSS file.

Download all resources
Share activities with pupils
New
New
Year 11
OCR

CSS fundamentals

I can style the content of web pages using a CSS file.

Download all resources
Share activities with pupils

These resources will be removed by end of Summer Term 2025.

Switch to our new teaching resources now - designed by teachers and leading subject experts, and tested in classrooms.

These resources were created for remote use during the pandemic and are not designed for classroom teaching.

View new resources

Lesson details

Key learning points

  1. CSS describes the styling that is applied to HTML.
  2. Properties of HTML tags are changed in a CSS file linked to a web page.
  3. CSS provides consistency of design across the pages of a website in a single location.
  4. CSS can control text and background formatting.

Keywords

  • CSS - Cascading Style Sheets: specifications used to style the content and layout of HTML pages

  • Consistency - keeping the same look, feel, and behaviour of items

Common misconception

It is easier to apply CSS directly to the HTML tags as they are used.

There is little time saved by applying CSS directly to tags and it generates more work later if the same changes need to be made in different parts of a web page.


To help you plan your year 11 computer science lesson on: CSS fundamentals, download all teaching resources for free and adapt to suit your pupils' needs...

Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Teacher tip

Equipment

Access to the Raspberry Pi Foundation's Code Editor or some other means of creating HTML files.

Licence

This content is © Oak National Academy Limited (2025), licensed on Open Government Licence version 3.0 except where otherwise stated. See Oak's terms & conditions (Collection 2).

Lesson video

Skip lesson video

Loading...

Prior knowledge starter quiz

Download quiz pdf

6 Questions

Q1.
What is the purpose of HTML in web development?
to style the content of a webpage
Correct answer: to create and structure the content of a webpage
to add animations to a webpage
to make a website accessible
Q2.
What is a web browser used for?
to write code for a website
to create hyperlinks
Correct answer: to view and interact with webpages
to organise files on a website
Q3.
What is a tag in HTML?
a clickable link
a characteristic of an object
a collection of webpages
Correct answer: a marker that indicates elements of a webpage
Q4.
What attribute is used to make images accessible by providing a text description?
Correct Answer: alt
Q5.
What HTML tag is used to define the main heading on a webpage?
Correct Answer: h1, <h1>
Q6.
What HTML tag is used to add an image to a webpage?
Correct Answer: img, <img>

Assessment exit quiz

Download quiz pdf

6 Questions

Q1.
What does CSS stand for?
Correct Answer: Cascading Style Sheets
Q2.
What is the purpose of CSS?
to create the structure of a webpage
to add animations to a webpage
Correct answer: to style the content and layout of a webpage
to make a website accessible
Q3.
What is an advantage of using CSS in a separate file?
It makes the page load faster.
Correct answer: It provides consistency across multiple webpages.
It allows you to use more colours.
It makes the code harder to read.
Q4.
Which of these is an example of a CSS property?
<h1>
<div>
alt
Correct answer: `font-size`
Q5.
What happens if you apply CSS directly to HTML tags?
Correct answer: It creates more work when making changes.
It speeds up the website.
It makes the CSS file unnecessary.
It makes the page more consistent.
Q6.
Which CSS property is used to change the background colour of a webpage?
Correct Answer: background-color