The CSS box model

In this lesson you will learn how to apply the CSS Box Model to achieve the exact appearance you would like to on your webpages.

Quiz:

Intro quiz - Recap from previous lesson

Before we start this lesson, let’s see what you can remember from this topic. Here’s a quick quiz!

Question 1

Question 2

Question 3

Q1.What is the purpose of the <div> element?

1/3

Q2.Which is the correct syntax for making a DIV which applies the class main?

2/3

Q3.What is the correct syntax in CSS for making the background colour of a DIV black?

3/3

Quiz:

Intro quiz - Recap from previous lesson

Before we start this lesson, let’s see what you can remember from this topic. Here’s a quick quiz!

Question 1

Question 2

Question 3

Q1.What is the purpose of the <div> element?

1/3

Q2.Which is the correct syntax for making a DIV which applies the class main?

2/3

Q3.What is the correct syntax in CSS for making the background colour of a DIV black?

3/3

Video

Click on the play button to start the video. If your teacher asks you to pause the video and look at the worksheet you should:

  • Click "Close Video"
  • Click "Next" to view the activity

Your video will re-appear on the next page, and will stay paused in the right place.

Worksheet

These slides will take you through some tasks for the lesson. If you need to re-play the video, click the ‘Resume Video’ icon. If you are asked to add answers to the slides, first download or print out the worksheet. Once you have finished all the tasks, click ‘Next’ below.

Quiz:

The CSS Box Model –

Don’t worry if you get a question wrong! Forgetting is an important step in learning. We will recap next lesson.

Question 1

Question 2

Question 3

Q1.What is the correct syntax in CSS for making the background colour of a DIV black?

1/3

Q2.Which property of the CSS Box Model is used to add space around the padding and content?

2/3

Q3.Which two layers of the CSS Box Model can only be transparent?

Select two (2) boxes

3/3

Quiz:

The CSS Box Model –

Don’t worry if you get a question wrong! Forgetting is an important step in learning. We will recap next lesson.

Question 1

Question 2

Question 3

Q1.What is the correct syntax in CSS for making the background colour of a DIV black?

1/3

Q2.Which property of the CSS Box Model is used to add space around the padding and content?

2/3

Q3.Which two layers of the CSS Box Model can only be transparent?

Select two (2) boxes

3/3

Lesson summary: The CSS box model

It looks like you have not attempted both the quizzes.

To share your results with your teacher please complete both the quizzes.

This was the final lesson in the unit HTML.

Browse Oak's lessons: