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

Web page layouts using CSS divisions

I can design a web page with sections and format them individually.

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

Web page layouts using CSS divisions

I can design a web page with sections and format them individually.

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. Web pages can be broken into sections called divisions.
  2. HTML elements can be labelled with class names.
  3. Divisions of a web page can be formatted independently in CSS via an assigned class name.

Keywords

  • Division - a section of a web page used to group items

  • Class - an identifier that can be applied to a collection of HTML elements

Common misconception

Web page divisions all need to have unique labels. They can't be the same.

When designing divisions of a web page the same formatting may need to be applied to multiple divisions. In this case the labels would need to be the same.


To help you plan your year 11 computer science lesson on: Web page layouts using CSS divisions, 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 does CSS stand for?
Computer Styling System
Consistent Style Structure
Cascading System Sheets
Correct answer: Cascading Style Sheets
Q2.
What is the purpose of CSS in web design?
to structure the content of a web page
Correct answer: to style and format the appearance of a web page
to create links between web pages
to store data for a website
Q3.
Which of the following is an example of a CSS property?
<div>
<style>
Correct answer: `background-color`
href
Q4.
What is the purpose of the class attribute in HTML?
to add a title to a web page
Correct answer: to group elements together for styling purposes
to create a hyperlink
to define the structure of a web page
Q5.
CSS applies __________ to HTML.
Correct Answer: styling, style, formatting
Q6.
What is the purpose of the
<style>
tag in HTML?
to link an external CSS file
to create a division on a web page
to add JavaScript to a web page
Correct answer: to define internal CSS styles for a web page

Assessment exit quiz

Download quiz pdf

6 Questions

Q1.
What does CSS stand for?
Correct Answer: Cascading Style Sheets
Q2.
What is a division in a web page?
a hyperlink to another page
a section of a web page used to group items
a list of items on a web page
a tag used to add an image
Q3.
What is TRUE about formatting divisions in CSS?
Divisions must have unique class names.
Divisions can only be formatted using inline styles.
Correct answer: Multiple divisions can share the same class name for consistent formatting.
Divisions cannot be formatted in CSS.
Q4.
What does the font-size property in CSS do?
changes the colour of the text
changes the background colour of an element
Correct answer: changes the size of the text
changes the size of a division
Q5.
Put these steps in the correct order to create and style divisions on a web page:
1 - Use the
<div>
tag to create sections in the HTML code.
2 - Create the classes in the style sheet.
3 - Apply the classes to the divisions on the web page.
Q6.
What is the CSS property used to create space between the content of an element and its border?
Correct Answer: padding