PPT 1.1
HTML5 and CSS3 – Illustrated, 2nd Edition
Unit D: Laying Out Elements with CSS
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, and Classroom Activities and/or Lab
Activities. Pay special attention to teaching tips, and activities geared towards quizzing your students,
enhancing their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
84: Assess the CSS Box Model
2
86: Set Element Widths and Borders
4
88: Set Margins and Padding
5
90: Align Elements with Float
6
92: Control Page Flow with Clear
7
94: Implement Fixed Positioning
9
96: Implement Relative Positioning
10
98: Control Stacking order
11
100: Implement Absolute Positioning
13
End of Unit Material
14
Glossary of Key Terms
15
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 2 of 15
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit D when they can:
• Assess the CSS box model
• Set element width and borders
• Set margins and padding
• Align elements with float
• Control page flow with clear
• Implement fixed positioning
• Implement relative positioning
•
•
•
Control stacking order
• Implement absolute positioning
8
8
84
4
4:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
t
t
th
h
he
e
e
C
C
CS
S
SS
S
S
B
B
Bo
o
ox
x
x
M
M
Mo
o
od
d
de
e
el
l
l
LECTURE NOTES
• Introduce the CSS box model, explaining that CSS represents every web page element using the box,
which treats each element as a rectangular box having several global properties. Use TABLE D-1 to
discuss these properties.
• Point out that padding, border and margin are all used to create space around the contents of a web
page element. Be sure students understand that they are not the same but that they are related to
each other.
• Explain that the border property is the only one that can be seen on a web browser, as it is
formatted with width, style, and color specified by the user. Point out that you can make a border
invisible by using the name-value pair “border: 0;”.
• Explain that the width and height of an element as specified in CSS apply to the element content
only, and that values specified for padding, border, and margins are added to the specified width
and/or height.
• Demonstrate to students how to properly calculate the dimensions of an element, so that the
element, together with the surrounding padding, border, and margin, will fit in the designated
space or area. You can use FIGURE D-2 as a visual guide for this.
• Explain the concept of margin collapse, which means that when the bottom margin of one element
is adjacent to the top margin of another element, the margins combine into a single margin with the
size of the greater of the two combined margins. Point out that this behavior should be considered
when calculating the space taken up by elements.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 3 of 15
• Discuss the units of measure, including pixels (px), ems (em), percent (%), and rems (rem), using the
TABLE D-2 as your guide. Be sure students understand the difference between relative units and
absolute units.
TEACHER TIP
Point out to students that margins can be set to three different value types:
• auto – allows the browser to set the margin, and gives the designer less control over the exact
layout of the web page.
• length – defines a fixed margin, specified in pixels, em, and so on.
• % – defines the margin as a percentage of the containing element.
FIGURES: D-1, D-2
TABLE D-1: Box model Properties
TABLE D-2: Commonly used CSS units of measure
BOXES:
1. Quick Tip: A declaration of border:0; means that the border for the affected element is not
visible and takes up no space.
2. Quick Tip: Relative units are useful when you want to calculate the size of document
content based on other elements, while absolute units are best for elements that need to
keep specific dimensions.
CLASSROOM ACTIVITIES
1. Critical Thinking: Consider a web page that includes multiple elements with the name-value pair
“border: 0;”. You want to define a distance of 4em between every two such elements. Do you think it is
best to use only margin to set this distance, only padding, or a combination of both? What are the
advantages of the way you suggest?
2. Critical Thinking: You are creating a website that has three theme colors, red, green, and blue, for a
company named TriCol. The owner wants the logo of the company to be surrounded by three adjacent
rectangles, one in each of the three theme colors, such that the red rectangle is closest to the logo, the
green rectangle surrounds the red rectangle, and the blue rectangle surrounds the green one. How can
you accomplish this? (Hint: nested elements)
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 4 of 15
8
8
86
6
6:
:
:
S
S
Se
e
et
t
t
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
W
W
Wi
i
id
d
dt
t
th
h
h
a
a
an
n
nd
d
d
B
B
Bo
o
or
r
rd
d
de
e
er
r
r
LECTURE NOTES:
• Explain to students that to set box properties for web page elements, they need to create
declarations that assign values to the properties.
• Discuss shorthand properties and point out that margin, border, and padding are shorthand
properties because they assign values to multiple CSS properties, in this case the box model.
• Explain that they can set the box model properties for all four sides of an element with a single
declaration.
• Discuss how CSS also supports specific properties to set the border, or the padding of one particular
side, as well as the width, style, or color of the border of a particular side of an element. Use TABLE
D-3 to discuss specific properties for components of the box model.
TEACHER TIP
Point out when multiple selectors are used, it is common to list the selectors in alphabetical order.
Explain that using this system makes it easy to check and be sure a selector is included in a long list
of selectors.
FIGURES: D-3, D-4
TABLE D-3: Specific properties for components of the box model
BOXES:
1. Quick Tip: The h1 content includes the <br> tag, which is a single-sided tag that creates a line
break.
2. Trouble: As you enter code, refer to the figures as needed to help you verify the placement of
the code you are typing.
3. Quick Tip: In a style rule that uses multiple type selectors, it’s common to list the selectors in
alphabetical order.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 5 of 15
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom Discussion: Have students define reset rule. Then discuss which properties they might
want to create reset rules for and why. Have students describe what they think will have to a web page
where reset rules have not been applied when the web page is opened using different browsers or
different versions of the same browser.
LAB ACTIVITY
8
8
88
8
8:
:
:
S
S
Se
e
et
t
t
M
M
Ma
a
ar
r
rg
g
gi
i
in
n
ns
s
s
a
a
an
n
nd
d
d
P
P
Pa
a
ad
d
dd
d
di
i
in
n
ng
g
g
LECTURE NOTES
• Explain that you can set different margin and padding values for different sides of an element by
assigning multiple values.
• Use TABLE D-4 to explain the different margin and padding values, including the use of the
shorthand property.
• Point out that in addition to number values, the margin property supports the value auto. Explain
that when auto is assigned to the left and right margins of an element, that element is centered
horizontally within its parent element.
TEACHER TIP
Take time to discuss TABLE D-4 with students and to have them give examples for padding and
margin that use one to four values. Be sure students can explain how their values affect the margin
or padding of the element.
FIGURES: D-5, D-6
TABLE D-4: Interpretation of different numbers of values for the margin and padding shorthand
properties
BOXES:
1. Quick Tip: When completing the steps in this book, enter each declaration on its own line.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 6 of 15
2. Quick Tip: When specifying a decimal value less than 1, it’s standard to include a leading 0 for
legibility.
3. Quick Tip: Your code will be a continuous column of code; the code in FIGURE D-6 has been
split into two columns to make it easier to read.
4. Trouble: Although calculated values sometimes result in decimal amounts, some browsers omit
the decimals in the developer tools.
CLASSROOM ACTIVITIES
1. Critical Thinking: Have students look at FIGURE D-6. Ask them to identify elements on the page
and talk about the margin and padding values that might have been used for that element. Ask students
to explain when they might want to apply a margin or padding value to only one side of an element.
Ask students to give examples of when they might use each of the value structures (1 – 4) presented in
TABLE D-4.
2. Quick Quiz:
9
9
90
0
0:
:
:
A
A
Al
l
li
i
ig
g
gn
n
n
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
ts
s
s
w
w
wi
i
it
t
th
h
h
F
F
Fl
l
lo
o
oa
a
at
t
t
LECTURE NOTES
• Explain that by default, a browser renders elements in a web document in the order they appear,
with most elements displayed below the element that precedes them. Explain that this default
arrangement of elements is known as normal flow.
• Discuss why this makes it simple to create layouts that stack elements vertically, but more
complicated to create layouts with multiple vertical columns.
• Point out that the float properties can be used to wrap elements around an element rather than be
stacked below it.
• Explain the importance of setting margin and padding to 0 for commonly used elements to ensure
precise values are specified for all the page elements rather than relying on browser defaults which
can vary between user agents.
• Demonstrate how setting the float property of some elements to one side, causes the other elements
to flow around them.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 7 of 15
• Explain that making some elements float to the right, while others float to the left, and using the
width property to define the width of each element creates the appearance of two columns.
TEACHER TIP
Point out that laying out content in floated columns has immediate benefits, such as progressive
downloading.
FIGURES: D-7, D-8, D-9
BOXES:
1. Quick Tip: Because the article and aside elements have no padding, borders, or margins, setting
their widths to 70% and 30% makes them fit exactly within their parent element.
2. Quick Tip: You’ll adjust the appearance of the footer element in the next lesson to prevent it
from overlapping the article content.
1. Quick Quiz:
2. Classroom discussion: Provide students with examples of different layouts, and discuss how each of
the layouts can be achieved using tables. Have students try to come up with ways to achieve the same
layout using floating elements.
LAB ACTIVITY
1. Provide students with a web page that includes multiple elements of varying sizes displayed in
stacked order, similar to the left image in FIGURE D-7. Ask students to recreate the provided
page layout in a web page using floating elements and the width property of these elements to
create a page where the elements wrap.
9
9
92
2
2:
:
:
C
C
Co
o
on
n
nt
t
tr
r
ro
o
ol
l
l
P
P
Pa
a
ag
g
ge
e
e
F
F
Fl
l
lo
o
ow
w
w
w
w
wi
i
it
t
th
h
h
C
C
Cl
l
le
e
ea
a
ar
r
r
LECTURE NOTES
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 8 of 15
• Point out that sometimes they may want to ensure that a specific element follows a floated element
rather than wrapping around the element. Explain that in this type of situation, they need to use
the clear property.
• Tell students the clear property helps them control the flow of objects even more precisely.
• Describe how the clear property is used to prevent floated elements from being displayed to the left,
right, or on either side of another element.
TEACHER TIP
Make sure students can explain the clear values in their own words. Have them describe the
elements in FIGURE D-10 and FIGURE D-12 using float and clear.
FIGURES: D-10, D-11, D-12
TABLE D-5: Values of the clear property
BOXES:
1. Clues to Use: Creating multicolumn layouts with float
Some of the most widely used layouts in print media involve columns of text and graphics
running parallel to each other down the page. You can use the float property to create a basic
version of this arrangement, known as a multicolumn layout. To build a two-column layout,
you float an element containing one column of content, and either allow the other column to
remain in the normal flow, or float it on the other side. To create the appearance of even
columns, the column with more content should be floated and assigned a distinct background
color, and the other column should use the background color of the parent element rather than
specifying its own. To create a three-column layout, you float an element that will serve as one
column on the left, float another element on the right, and allow the element that will be the
middle column to remain the normal flow.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 9 of 15
2. Clues to Use: Dealing with floated content that’s longer than its parent element
An element’s content can extend below the bottom of its container element, especially when
the content of a floated element is longer than other elements on a page. When a floated
element is followed by another element in the normal flow, the clear property can be useful in
extending the formatting of the parent element to all the content within it. However, in some
cases the order of elements in HTML code does not lend itself to this layout. In these cases, you
can add the declaration overflow: auto; to the parent element to extend it horizontally to give
the appearance of the floated element still being in the normal flow.
CLASSROOM ACTIVITIES
1. Critical Thinking: Have students think about using a table to create a multicolumn layout and using
the float property to create a multicolumn layout. What are the advantages and disadvantages of each?
Why? Which is the preferred CSS3 method?
2. Quick Quiz:
9
9
94
4
4:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
F
F
Fi
i
ix
x
xe
e
ed
d
d
P
P
Po
o
os
s
si
i
it
t
ti
i
io
o
on
n
ni
i
in
n
ng
g
g
LECTURE NOTES
• Explain that the position property lets students more precisely specify where an element should be
positioned on a web page.
• Mention that CSS supports fixed positioning, relative positioning, absolute positioning, and static, as
described in TABLE D-6.
• Explain that an element with fixed positioning is displayed at the top of the stacking order and it is
positioned relative to the browser window rather than to a web page element. As a result, fixed
positioning causes an element to remain in the same location in a browser window as a user scrolls
through the web page.
• Point out that fixed positioning of an element can be useful for information or tools that users may
need at any point on a long web page.
• Tell students that to implement fixed positioning, they use the position property with the fixed
value, and then they specify a either a horizontal position using the left or right property or a
vertical position using the top or bottom property, as described in TABLE D-7.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 10 of 15
TEACHER TIP
Discuss with students which elements might benefit from fixed positioning and why.
FIGURES: D-13, D-14, D-15
TABLE D-6: Commonly used values of the position property
TABLE D-7: CSS properties and values used in fixed positioning
BOXES:
1. Quick Tip: You can generate lorem ipsum text using many free online services, such as
lipsum.com.
CLASSROOM ACTIVITIES
1. Critical Thinking: Discuss fixed positioning with students, especially which elements it might be
suitable for. Then have students name some problems that might come up for users when elements are
placed using fixed positions.
2. Quick Quiz:
9
9
96
6
6:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
R
R
Re
e
el
l
la
a
at
t
ti
i
iv
v
ve
e
e
P
P
Po
o
os
s
si
i
it
t
ti
i
io
o
on
n
ni
i
in
n
ng
g
g
LECTURE NOTES
• Use FIGURE D-16 to provide an overview of the concept of relative positioning, which allows
developers to make adjustments to the default position of an element while preserving the space
allotted to the element in the normal flow.
• Explain that to implement relative positioning students need to set the position property to relative.
TEACHER TIP
Point out to students that to override an inherited position property and position the element as it
would be automatically by the browser, they can set the position property to “static”.
FIGURES: D-16, D-17, D-18
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 11 of 15
TABLE D-8: CSS properties and values used in relative positioning
BOXES
1. Quick Tip: While horizontal and vertical positions can sometimes be calculated, it’s often a
process of trial and error to arrive at the correct values.
2. Clues to Use: Maintaining accessibility with positioning
When you alter the layout of your web pages using positioning, it’s important to plan for non-
visual user agents, as well as devices with smaller screens, to make sure your page content still
CLASSROOM ACTIVITIES
1. Critical Thinking: Can implementing relative positioning cause elements to overlap? Explain why or
why not. How can you deal with such overlap if it occurs?
2. Quick Quiz:
LAB ACTIVITY
1. Provide students with an HTML document that includes multiple elements but not positioning
information and with a page layout in which the elements listed are not in their default page
flow positions. Have students create a CSS style sheet that recreates the provided page layout
using the provided HTML document using relative positioning.
9
9
98
8
8:
:
:
C
C
Co
o
on
n
nt
t
tr
r
ro
o
ol
l
l
S
S
St
t
ta
a
ac
c
ck
k
ki
i
in
n
ng
g
g
O
O
Or
r
rd
d
de
e
er
r
r
LECTURE NOTES
• Explain that when using positioning, two elements can occupy the same space on a web page.
• Provide an overview on the ability to stack elements, thereby introducing many additional layouts
to a web page. Point out that this requires careful planning in order to avoid making the web page
unclear.
• Explain that a positioned element is placed in a new layer, which is displayed on top of the basic
page flow layer. Use FIGURE D-19 to discuss stacking elements.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 12 of 15
TEACHER TIP
Point out that if two positioned elements overlap and a z-index is not specified, the element
positioned last in the HTML code will appear on top. Otherwise, elements with greater z-index
values are in front of elements with lower z-index values.
FIGURES: D-19, D-20, D-21
BOXES
1. Quick Tip: Values for the z-index property can be any number, including a negative number.
Stacking order is based solely on which element has a larger z-index value, not on the actual
value.
2. Clues to Use: Understanding stacking context
Controlling stacking order with the z-index property is straightforward in many cases.
However, in some situations, it’s important to understand some of the finer details of the
property in order to achieve the results you want. The z-index property determines stacking
order based on a stacking context, which is the element containing elements to be stacked.
When stacking sections of a page, stacking order works pretty predictably, as all elements share
3. Clues to Use: Evaluating website layout types
By default, web page content occupies the entire width of a user’s browser window. When most
users accessed the web with a desktop computer, designers often used a static layout, which
specifies a fixed width for the web page content. However, a static layout that’s sized
appropriately for a desktop computer often doesn’t fit on the screen of a smaller device such as a
smartphone. Designers for some websites find that setting a fixed width and expecting users to
scroll and/or zoom to view the entire page is still their best option. However, many other sites
have replaced static layouts with fluid layouts—also known as liquid layouts—in which the
CLASSROOM ACTIVITIES
1. Critical Thinking: You are creating a website for a historical society, and they want you to annotate a
map of the Shenandoah Valley to indicate the locations of Civil War battles that took place in the
valley. The location of each battle should be indicated by an X of a specified color. Can you achieve this
without making changes to the original map by using stacked elements? Explain why or why not.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 13 of 15
2. Quick Quiz:
1
1
10
0
00
0
0:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
A
A
Ab
b
bs
s
so
o
ol
l
lu
u
ut
t
te
e
e
P
P
Po
o
os
s
si
i
it
t
ti
i
io
o
on
n
ni
i
in
n
ng
g
g
LECTURE NOTES
• Explain that absolute positioning takes an element out of the page flow and allows other elements to
flow into the space it would have occupied.
• Demonstrate how to implement absolute positioning by applying the position property and setting
it to “absolute”.
• Point out that a new location of an element can be specified relative to its default location. Use
TABLE D-9 to discuss the CSS properties and values used with absolute positioning.
• Explain that the location of an absolutely positioned element is calculated based on the closest
ancestor element that has a position applied to it. Therefore, you sometimes need to set the position
of some elements to relative without actually changing their position in order to have an anchor
element for providing an absolute position for a child element.
TEACHER TIP
In order to make it possible to provide absolute positioning for any element in a page, you can add
the position property to the body element, thereby providing a positioned ancestor element for all
page elements.
FIGURES: D-22, D-23, D-24, D25
TABLE D-9: CSS properties and values used in absolute positioning
BOXES
1. Quick Tip: If you want to position an element in relation to an ancestor element that is not
positioned, you can add the declaration position: relative; to the ancestor element. Without top,
right, bottom, or left values, the ancestor element remains in its original position but serves as
the reference point for absolutely positioning its descendant element
2. Clues to Use: Creating a cohesive website
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 14 of 15
audiences or topics to get a clear understanding of the standard elements that users may expect
to see.
CLASSROOM ACTIVITIES
1. Classroom discussion: Have students discuss the advantages and disadvantages of absolute
positioning vs. relative positioning. Is it possible to achieve every layout using only one of the
positioning schemes? Is it useful to combine both positioning styles in a single web page? When
would it be good to use a combination?
2. Quick Quiz:
LAB ACTIVITY
1. Provide students with an HTML document that includes multiple elements but not positioning
information and with a page layout in which the elements listed are not in their default page
flow positions. Have students create a CSS style sheet that recreates the provided page layout
using the provided HTML document using absolute positioning.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 15 of 15
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
absolute positioning (100)
absolute units (84)
border (84)
box model (84)
collapse (84)
percent (85)
pixel (85)
relative positioning (96)
relative units (84)
rem (85)
Top of Document
em (85)
fixed positioning (94)
layer (98)
margin (84)
normal flow (90)
padding (84)
reset rule (86)
shorthand property (86)
stacking context (98)
static layout (94)