HTML CSS

Advanced

30 mins

Teacher/Student led

385 points

What you need:
Chromebook/Laptop/PC or iPad/Tablet

CSS Box Model

Dive into the world of CSS Box Model with this step-by-step lesson. Learn about margins, borders, padding, and content, and how they control the layout of a webpage. Explore CSS borders, border styles, widths, and colours. Understand padding and margins, and how to apply them to individual sides of an element. Engage in practical exercises to reinforce your learning.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 CSS Box Model
2 CSS Borders
3 border-style
4 border-width
5 border-color
6 Border Exercise
7 CSS Padding
8 Padding for individual sides
9 Padding Exercise
10 CSS Margins
11 Margin for individual sides
12 Margin exercise
Quiz

1 - CSS Box Model

Everything in a web page has a box around it. These boxes are mostly invisible but they control how everything is arranged and laid out on the page. We call this the CSS Box Model.

Each box has:

Margins - top, bottom, left and right margins outside the box. These are transparent.
Borders - top, bottom, left and right borders of the box. These can be set to a colour.
Padding - top, bottom, left and right padding inside the box. These are transparent.
Content - The content of the box. This can be text, images etc.

Margin

Border

Padding

Hi, I'm the content of the box!

30 points

2 - CSS Borders

Let's take a look at CSS Borders first. Here are some examples of <div></div> elements that have different borders applied to them using CSS.

I have red borders on the top, bottom, left and right.

I have a green border on the top and right.

I have blue borders on the top, bottom, left and right that are rounded.

I have gray borders on the top, bottom, left and right that are dashed.

30 points

3 - border-style

The border-style CSS property sets the style of border to use on the box. The following values can be set for border-style:

dotted - sets a dotted border.
dashed - sets a dashed border.
solid - sets a solid border.
double - sets a double border.
groove - sets a 3D grooved border.
ridge - sets a 3D ridged border.
inset - sets a 3D inset border.
outset - sets a 3D outset border.
none - sets no border.
hidden - sets a hidden border.

<div style="border-style: dotted;">A dotted border.</div>
<div style="border-style: dashed;">A dashed border.</div>
<div style="border-style: solid;">A solid border.</div>
<div style="border-style: double;">A double border.</div>
<div style="border-style: groove;">A groove border.</div>
<div style="border-style: ridge;">A ridge border.</div>
<div style="border-style: inset;">An inset border.</div>
<div style="border-style: outset;">An outset border.</div>
<div style="border-style: none;">No border.</div>
<div style="border-style: hidden;">A hidden border.</div>

div{
    margin-bottom: 10px;
}

30 points

4 - border-width

The border-width CSS property sets how wide (usually in pixels) the border is.

<div style="border-style: dotted; border-width: 3px;">A dotted border.</div>
<div style="border-style: dashed; border-width: 6px;">A dashed border.</div>
<div style="border-style: solid; border-width: 15px;">A solid border.</div>

div{
    margin-bottom: 10px;
}

We can also set different widths for each of the top, right, bottom and left borders by providing 4 values for the border-width CSS property in the following order:

top width
right width
bottom width
left width

<div style="border-style: solid; border-width: 10px 5px 20px 40px;">A solid border.</div>

30 points

5 - border-color

The border-color CSS property sets the colour of the border. The values we can use to set the colour can be:

A colour name - for example "red".
A HEX value - for example "#0000FF". A hexadecimal value is made up of hexadecimal numbers for red, green and blue to create one colour.
A RGB value - for example "rgb(0,255,100)". This sets the values for red, green and blue to create one colour.
Transparent - we can set a border to be transparent.

<div style="border-style: dotted; border-width: 5px; border-color: red;">A dotted border using a colour name.</div>
<div style="border-style: dashed; border-width: 5px; border-color: #0000FF;">A dashed border using a HEX value.</div>
<div style="border-style: solid; border-width: 5px; border-color: rgb(0,255,100); ">A solid border using a RGB value.</div>
<div style="border-style: solid; border-width: 5px; border-color: transparent;">A solid border with a transparent colour.</div>

div{
    margin-bottom: 10px;
}

30 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

CSS Box Model

Live Class Feed

1 - CSS Box Model

Margin

Border

Padding

Hi, I'm the content of the box!

2 - CSS Borders

3 - border-style

4 - border-width

5 - border-color

Unlock the Full Learning Experience

Learning Points