icon-background-square
Year 11

The CSS box model

icon-background-square
Year 11

The CSS box model

warning

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.

Lesson details

Key learning points

  1. In this lesson, we will learn how to apply the CSS Box Model to achieve the exact appearance we would like to on a webpage.
copyright

Licence

This content is made available by Oak National Academy Limited and its partners and licensed under Oak’s terms & conditions (Collection 1), except where otherwise stated.

Loading...

3 Questions

Q1.
What is the purpose of the <div> element?
It is used to divide the page up into columns
So that you can divide numbers in calculations within webpages
Correct answer: So that you can divide webpages up into meaningful sections to apply CSS to them
So that you can divide webpages up to get multiple pages
Q2.
Which is the correct syntax for making a DIV which applies the class main?
<class div="main"> </div>
<div class:main> </div>
Correct answer: <div class="main"> </div>
<div-class=main> </div>
Q3.
What is the correct syntax in CSS for making the background colour of a DIV black?
background colour: black;
Correct answer: background-color: black;
color: black
div-background: black;

3 Questions

Q1.
What is the correct syntax in CSS for making the background colour of a DIV black?
background colour: black;
Correct answer: background-color: black;
background-colour: black;
color: black;
div-background: black;
Q2.
Which property of the CSS Box Model is used to add space around the padding and content?
Correct answer: border
content
margin
padding
Q3.
Which two layers of the CSS Box Model can only be transparent?
border
content
Correct answer: margin
Correct answer: padding