Layouts and the CSS box model

Layouts and the CSS

box model

KS4 – HTML and CSS

What is the relationship between these two files?

Starter activity

<div class="favourite">

<h2>My favourite films</h2>

<ul>

<li>Back to the future</li>

<li>Groundhog day</li>

<li>Ferris Buller's day off</li>

</ul>

</div>

1

.favourite {

background-color: rgb(50, 60, 205);

color: white;

border: 2px solid black;

margin: 20px;

padding:10px;

}

HTML

CSS

Explore the code

Starter activity

Visit the following site to explore
HTML and CSS that makes use of
DIVs:

ncce.io/divs_and_classes

Work in pairs to answer the
questions on your worksheet

2

The division <div> tag helps us to
split the layout of a webpage into
sections.

We can create divisions in our pages
by surrounding blocks with these
tags.

When you group together HTML
elements using <div> tags you can
ask CSS to make changes to
elements within the DIV.

Introduction to DIV tags

3

Activity 1

<div class = ＂section1＂>

<h1>My web page heading</h1>

</div>

We can think of DIVs as a way of
breaking our page into boxes or
containers.

In this example there is one DIV that
contains all the other DIVs.

Some of the inner DIVs also have
another DIV inside them.

Visualising a page as a series of DIVs

4

Activity 1

My website

Page1 Page2 Page3

Copyright Joe Bloggs

●Pizza

●Burgers

My favourite foods

●Spiderman

●Toy story

My favourite films

Heading

Navigation

Content

Footer

Now that you have experimented
with DIVs and classes it is time to
plan how to use them with your
existing website.

Open your website from last lesson.

Use the activity 2 sheet to plan how
you can use DIVs and classes to
apply different styles to sections of
your site.

Planning DIVs and classes

5

Activity 2

Open your HTML and CSS files for
the website you have been building
over the previous lessons.

Using your editor, add DIVs and
classes so that the styling matches
your planning.

Explorer: Research and apply
advanced CSS such as borders and
background images

Applying the DIVs and classes

6

Activity 3

.main{

background-colour:

lightblue

font-family: verdana

.heading{

background-colour: blue
color: white

Spot the 3 mistakes

7

<class div="main">

<class div="heading">

<h1>My top 10 foods</h1>

</div>
<ul>

<li>Pizza</li>
<li>Burgers</li>

</ul>

</div>

Plenary

HTML

CSS

.main{

background-color: lightblue;
font-family: verdana;}

.heading{

background-color: blue;
color: white;}

Spot the 3 mistakes

8

<div class ="main">

<div class="heading">

<h1>My top 10 foods</h1>

</div>
<ul>

<li>Pizza</li>
<li>Burgers</li>

</ul>

</div>

Plenary

HTML

CSS

1.Color spelt with a ‘u’ (UK English)

2.

Missing semicolons and end curly
braces on all the CSS styles

3. div and class are the wrong
way round.

In this lesson, you will:

●Explain how to plan a website by developing a house style and sketched
wireframe

●Describe the box model in CSS

●Apply skills to position items within a page

Layouts and the CSS box model

4

Objectives

Websites on different devices

3

Starter activity

In Google Chrome navigate to the
BBC news website and press F12.

●What do you notice about how
the site changes depending on
the device selected?

●What happens to the text,
navigation, and images?

●What about if you rotate the
device?

A sitemap is a conceptual diagram
showing how different pages will link
together in a website.

It is usually hierarchical, showing the
homepage and how it links to all the
subpages.

Sitemap

5

Activity 1

House style refers to a set of rules that
a company decides on when making
documents, websites, etc.

This may include:

●Types of font

●Colours for text, backgrounds, etc.

●Logos

House style

6

Activity 1

Wireframes are a way of planning the
layout and content of a webpage
before coding.

They are usually basic sketches to
plan where elements will be, their
dimensions, and how a user will
interact with the webpage.

Once you are happy with the
wireframe then you can start coding.

Wireframes

7

Activity 1

When wireframing it is also important to
take into consideration user experience,
as there are a few traditional
placements of items, meaning that users
will find your website easier to use and
locate the things they are looking for.

Wireframes

8

Activity 1

header

navbar

ad-

sidebar

main-
image

intro-
text

article

footer

Every element in HTML has padding, a
border, and a margin. This is known as
the box model.

●Margin adds space outside the
border (and any neighbouring
elements). It can only be
transparent

●Border adds space around the
padding and content

●Padding creates space around the
content and is also transparent.

The CSS box model

9

Activity 2

CSS BOXMODEL

On the activity sheet, we will now recap
the previous lesson by taking a
wireframe and transferring it into
code.

Activity 2: Transition from a wireframe into code

10

Activity 2

​WORKSHEET - ACTIVITY

By default, when we add DIVs they
stack on top of each other. They are
what we call block-level elements.

If we wanted to create a layout like
the one on the right, we start off by
having a container DIV of width
960px, then centre it.

Positioning elements using CSS – Floating

11

Activity 3

header

ads

article

<style>
.container{

width : 960px;
background-color: orange;
margin-left : auto;
margin-right : auto;

}

</style>

container DIV

Positioning elements using CSS – Floating

12

Activity 3

header

ads

article

Within the container DIV we now
need to create the inner DIVs.

<div class="container">

<div class="header">
</div>
<div class="article">
</div>
<div class="ads">
</div>

</div>

Positioning elements using CSS – Floating

13

Activity 3

header

ads

article

However, if we write the CSS for
these elements, they end up stacked
on top of one another since they are
block-level elements.
<style>
.article{

width: 600px;
height: 300px;}

.ads{

width: 360px;
height: 300px;}

</style>

Positioning elements using CSS – Floating

14

Activity 3

ads

article

header

By floating the elements we can
make the DIVs ‘flow’ beside each
other.

<style>
.article{

width: 600px;
height: 300px;
float: left;}

.ads{

width: 360px;
height: 300px;
float: left;}

</style>

Positioning elements using CSS – Floating

15

Activity 3

Positioning elements using CSS – Floating

16

Activity 3

header

ads

intro

image

information

Using the CSS cheat sheet as a guide:

Task

●Can you create two extra DIVs for
the navigation and footer?

●Can you add content to the DIVs?

Explorer activity
Can you split the content DIV using floats
to create the layout on the right?

Design a sitemap, wireframe, and house style for the website you will be
starting to make next lesson.

Your website could be about:

Homework

17

Homework

●Personal Portfolio: Each student could create a website showcasing their skills, achievements, projects, and goals. This is a great way for students to learn to present their work professionally.

●School Club or Event Website: Students could design a website for a school club (e.g., Robotics, Drama, Environmental) or an upcoming school event (e.g., Science Fair, Talent Show). This lets them focus on real-world needs, like schedules, team information, and contact forms.

● Local Community Guide: Create a website focused on a neighborhood or town, with sections about local history, attractions, and community news. This provides a chance to research and organize information for public interest.

-

Assessment rubric

18

Homework

N2

N3

N4

HTML/CSS

Only HTML

Internal CSS

External CSS using a linked file

Pages

1 page

2 pages

3 pages

Images

1 image

Images are relevant

Images are relevant, clear, and
sized appropriately

Accessibility

Webpages hard to read

Webpages easy to read

Webpages easy to read. All
images have alt tags. Fonts,
sizes, and colours (contrast) are
clear

Navigation

Links may not all work. At
least one page has a link

Navigation is quite clear

Navigation is very clear. All links
work. Every subpage has at
least a link back to the home
page

Design

Page does not match
design

Pages meet some aspects
of the design

Pages meet design

Assuming ‘Text’ is the content, what is the name of the area between the
content and the border?

Question 1

19

Plenary

Text

Margin

?

Border

Assuming ‘Text’ is the content, what is the name of the area between the
content and the border?

Question 1 – Answer

20

Plenary

Text

Margin

Padding

Border

Multiple Choice

Which CSS property would create a 10px space between two touching
elements so that they are no longer touching?

• border-right : 10px;

• padding-right : 10px;

• margin-right : 10px;

• content-right : 10px;

Multiple Choice

In the CSS box model, what are the four layers called?

• A)text, padding, border, margin

• B)image, padding, border, margin

• C)data, padding, border, margin

• D)content, padding, border, margin

Multiple Choice

What would this element’s full height be after applying the following styles?

div {

     height: 200px;

     padding: 4px;

     border: 2px dashed red;

     margin: 0;}

• 200px

• 206px

• 212px

Multiple Choice

Look at the diagram.

What would the maximum allowable width of the ads DIV be so that it can float up into the gap next to the article?

• 300px

• 400px

• 320px

In this lesson, you…

●Learned how to plan a website
using a sitemap, house style, and
sketched (or alternative) wireframe

●Learned what is meant by the box
model in CSS

●Applied your skills to position items
within a page

Next lesson

29

●Create a three-page website to
showcase the skills learned
throughout this unit of study

Summary