Skip to content
Teachers
Go to pupils
Choose exam board for KS4 Biology
Choose exam board for KS4 Chemistry
Choose exam board for KS4 Combined science
Choose exam board for KS4 Computer Science (GCSE)
Choose exam board for KS4 English
Choose exam board for KS4 French
Choose exam board for KS4 Geography
Choose exam board for KS4 German
Choose exam board for KS4 History
Choose tier for KS4 Maths
Choose exam board for KS4 Music
Choose exam board for KS4 Physical education (GCSE)
Choose exam board for KS4 Physics
Choose exam board for KS4 Religious education (GCSE)
Choose exam board for KS4 Spanish

Guidance

About us

      Web page layouts using CSS divisions

      Download all resources
      Previous lesson
      Next lesson
      Skip to lesson content
      Share lesson with pupils

      Lesson details

      Learning outcome

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

      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.

      Teacher tip

      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.

      Equipment

      Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor

      Licence

      This content is © Oak National Academy Limited (2026), 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 starter quiz questions (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 exit quiz questions (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

      To help you plan your 11 computer science lesson on: Web page layouts using CSS divisions, download all teaching resources for free and adapt to suit your pupils' needs...