Supplementary Lesson 2:
CSS Layout & Box Model
csinschools.com
Supplementary Lesson
Previously, on CS in Schools...
<a href=“https://csinschools.com”>CS in Schools</a>
2
Previously, on CS in Schools...
<a href="#instructions">Go to the instructions</a>
<h1>Information</h1>
<h1>Prices</h1>
<h1>Instructions</h1>
3
Activity 10.01 - Debugging
We’ve created a web page with at least 10 errors! Your task is to try and find as many as you can and fix them. Good luck! Use this worksheet as a guide.
4
Complete Repl.it Activity:�10.01 - Debugging
Learning objectives
By the end of this lesson, you should be able to:
5
CSS Revisited
6
We can think of HTML a bit like a ‘floor plan’ that tells us what we have and where it is. CSS tells us what the items in our floor plan should look like (e.g. colour, size, shape)
For example, a HOUSE:
CSS
HTML
CSS Revisited
7
HTML
CSS
Just like in our HOUSE analogy, in this diagram, we see:�
CSS: Grouping Elements
8
<span>
When designing web pages, you may want to style a group of elements.
<div>
A <span> appears on the same line as other elements.
We can think of <span> applying to a small chunk of the html document. (e.g. text colour)
A <div> appears on a new line.�
We can think of <div> applying to a division or section of the html document. (e.g. paragraphs)
<span>
9
<p>Timmy the pink elephant was the best friend a rabbit could hope to have.</p>
If we want to style a group of words such as “Timmy the pink elephant”, we can use the <span> tag as a grouping element.
Timmy the pink elephant was the best friend a rabbit could hope to have.
index.html
Output Display
<span>
10
<p><span>Timmy the pink elephant</span> was the best friend a rabbit could hope to have.</p>
Then we can use CSS to style the element. We could use <span> as the selector but generally we will want to style different <span> tags in different ways, hence it is usually better to add a .class or #id. We’ll add a .class.
index.html
<span>
11
<p><span class="timmy">Timmy the pink elephant</span> was the best friend a rabbit could hope to have.</p>
Then we can use CSS to style the text:
.timmy {
color: magenta;
}
Timmy the pink elephant was the best friend a rabbit could hope to have.
index.html
Output Display
<div>
12
<h1>Tic Tac Toe</h1>
<p>It is a game</p>
<p>It is played by 2 people</p>
If you want to group a section of elements, such as the <h1> and both the <p> tag, you can use a <div> tag.
index.html
<div>
13
Notice how the <h1>, and <p> tags are indented to show that they are now inside the newly created <div> element.
<div>
<h1>Tic Tac Toe</h1>
<p>It is a game</p>
<p>It is played by 2
people</p>
</div>
index.html
<div>
14
<div class="tictactoe">
<h1>Tic Tac Toe</h1>
<p>It is a game</p>
<p>It is played by 2
people</p>
</div>
Then we can apply CSS to the entire <div> tag. It is possible to use a simple selector but in general it is better to give the <div> an #id or a .class and use that to apply the CSS rules. For this example let’s create a .class.
index.html
<div>
15
<div class="tictactoe">
<h1>Tic Tac Toe</h1>
<p>It is a game</p>
<p>It is played by 2 people</p>
</div>
.tictactoe {
background-color: black;
color: white;
}
style.css
Tic Tac Toe
It is a game
It is played by 2 people
index.html
Output Display
Inline vs Block Elements
16
Inline elements do not have a line break after them. We’ve already used the following inline elements:�
When we use these there is no newline added.
<span> is an inline element
Block elements do have a line break after them. We’ve already used the following block elements:�
When we use these there is a newline added.
<div> is a block element
Inline vs Block Elements
17
<body>
<h1>Block element h1</h1>
<p>Block element p</p>
<p><span>Inline span</span> and
<span>inline span</span></p>
<p>This <a href="#">link</a> is
inline</p>
<div>Block element div</div>
<p>Block element p</p>
</body>
Block element h1
Block element p
Inline span and inline span
This link is inline
Block element div
Block element p
Output Display
Size of <div> elements
18
By default <div> tags take up 100% of the width of the screen. We can use CSS to change the width.
<div id="info">
<h1>Giraffes</h1>
<p>Giraffes are tall!!</p>
<p>The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant. It is traditionally considered to be one species, Giraffa camelopardalis, with nine subspecies. However, the existence of up to nine extant giraffe species has been described, based upon research into the mitochondrial and nuclear DNA, as well as morphological measurements of Giraffa. Seven other species are extinct, prehistoric species known from fossils1.</p>
</div>
index.html
1https://en.wikipedia.org/wiki/Giraffe
Size of <div> elements
The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant. It is traditionally considered to be one species, Giraffa camelopardalis, with nine subspecies. However, the existence of up to nine extant giraffe species has been described, based upon research into the mitochondrial and nuclear DNA, as well as morphological measurements of Giraffa. Seven other species are extinct, prehistoric species known from fossils.
Output Display width: 100%
By default <div> tags take up 100% of the width of the screen. We can use CSS to change the width.
The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant. It is traditionally considered to be one species,
...
Output Display width: 50%
Size of <div> elements
20
#info { width: 300px; } | OR | #info { width: 50%; } |
300px means: make the <div> with id="info" exactly 300 pixels wide on the screen | 50% means: make the <div> with id="info" exactly 50% of the screen width |
<div id="info">
<h1>Giraffes</h1>
<p>Giraffes are tall!!</p>
<p>The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant…</p>
</div>
index.html
style.css
Here are two ways we can set how wide our <div> is using pixels (px) or a percentage (%).
Size of <div> elements
The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant. It is traditionally considered
...
21
#info { width: 300px; } | | #info { width: 50%; } |
The giraffe (Giraffa) is an African artiodactyl mammal, the tallest living terrestrial animal and the largest ruminant...
Here are two ways we can set how wide our <div> is using pixels (px) or a percentage (%).
Activity 10.02 - Web Architecture
Your task is to style a website about web architecture with terms and definitions. The content has been created already but you must use your new found CSS knowledge to style the web page.
22
Complete Repl.it Activity:�10.02 - Web Architecture
CSS Box Model
23
Every element in HTML is considered a box!
<p>
<span>
<div>
<h1>
<p> The <span> quick </span> fox </p>
<div>
<h1> I’m a box </h1>
</div>
CSS Box Model
24
Every element has 4 parts:
We can use CSS to modify each of these properties.
Margin
Border
Padding
Content
CSS Box Model
25
margin: The transparent area around the box that separates the box from other elements.
CSS to set margin size on each side of the box
margin: 15px;
CSS to set margin size on left side only
margin-left: 20px;
There are also margin-top, margin-bottom, and margin-right properties.
Margin
Border
Padding
Content
Centering a <div> tag with the margin property
26
margin: auto;
For example, if your browser is currently 800 pixels wide, then this CSS code will set the width of the "container" <div> to 400 as specified, leaving 400 pixels. Therefore it will set the left margin to 200 pixels and the right margin to 200 pixels. This centers the <div> on the page!
See example on next page
index.html
<div id="container">
<h1>Centering Tricks</h1>
<p>Center me please!</p>
</div>
style.css
#container {
width:400px;
margin: auto;
border: 1px solid red;
}
Centering a <div> tag with the margin property
27
index.html
<div id="container">
<h1>Centering Tricks</h1>
<p>Center me please!</p>
</div>
style.css
#container {
width:400px;
margin: auto;
border: 1px solid red;
}
Centering Tricks
Center me please!
Output Display
Width of the ‘container’ (box) in pixels (px)
‘px’ defines the thickness of the border
Border
28
Margin
Border
Padding
Content
border: Places a border around the element inside the margin.
We use the border property and specify 3 values:�
You can also use border-top, border-bottom, border-right, and border-left.
Border: Example
29
Output Display
style.css
#container {
width: 400px;
margin: auto;
border: 4px solid #25326f;
}
Border Styles
30
Border Style Values:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border.
The effect depends on the
border-color value
ridge - Defines a 3D ridged border.
inset - Defines a 3D inset border.
outset - Defines a 3D outset border.
none - Defines no border
hidden - Defines a hidden border
Margin
Border
Padding
Content
Border Styles
31
Padding
32
padding: Is the space between the content and the border. It retains the background colour assigned to the element.
If your element has a background colour or border, you will almost always want to add padding.
CSS to set padding size on each side of the content
padding: 15px;
There are also padding-top, padding-bottom, padding-left, and padding-right properties.
Margin
Border
Padding
Content
Activity 10.03 - HTML Party Poster
Take a look at the party poster below. We’d like you to create something similar with lots of colour. Your task is to take our plain web page and style it!
33
Complete Repl.it Activity:�10.03 - HTML Party Poster
Summary
34
Extension - Box Model: Tinker Time
Have a go tinkering with the following code, make use of the concepts we discussed in today’s lesson!
35
Complete Repl.it Activity:�10.04 - Box Model: Tinker Time
License Information
These CS in Schools lessons plans, worksheets, and other materials were created by Jeff Plumb and have been modified by the team at CS in Schools. They are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
All images are sourced from Flaticon
36