PPT 1.1
HTML5 and CSS3 – Illustrated, 2nd Edition
Unit E: Formatting Text 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
students up to date with the latest in technology news. Direct your students to
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
110: Assess Web Fonts
2
112: Declare a Font Family
3
114: Use a Custom Font
5
116: Declare Font Size and Line Height
6
118: Implement Bold and Italics
7
120: Style Pseudo-elements
8
122: Specify hex and RGB colors
9
124: Add Shadows
11
126: Create a Media Query
12
End of Unit Material
13
Glossary of Key Terms
14
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 2 of 14
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 web fonts
• Declare a font family
• Use custom fonts
• Declare font size and line height
• Implement bold and italics
• Style pseudo-elements
• Add shadows
• Create a media query
1
1
11
1
10
0
0:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
W
W
We
e
eb
b
b
F
F
Fo
o
on
n
nt
t
ts
s
s
LECTURE NOTES
• Explain to students that the display of fonts on a web page is limited to fonts available on the user’s
computer; unlike what happens when formatting a document created on a word processing
program, where they can use any font installed on their computer.
• Point out that since different computers have different fonts installed, web pages may not appear
the same on different computers. Therefore, it is up to the web designer to ensure that a web page
displays consistently on different machines.
• Discuss with students strategies for implementing fonts consistently.
TEACHER TIP
Remind students that in order to facilitate consistency in web page display, the fonts included in a
specific font stack should be fairly similar.
• Outline the idea of a generic font family, and introduce the five different types of generic font
families. Use TABLE E-2 as a guide.
• Explain that the name of a generic font family can be added to the end of a font stack to provide
guidance to user agents for those situations in which the other font family choices are not available.
TEACHER TIP
Point out that any font family name containing more than one word should be surrounded by
quotes, e.g., “times new roman”.
• Explain the concept of a downloadable font and a custom font.
• Point out that using a downloadable font should not replace naming alternative fonts.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 3 of 14
FIGURE: E-1
TABLE E-1: Commonly used font stacks
TABLE E-2: Generic font families
BOXES:
1. Quick Tip: Values specified for the font-family property are not case sensitive, but it’s common
practice to capitalize the first letter of each font family.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to think of reasons why it is important for a generic font family to be
listed last in the font stack, and why it is important for a downloadable font to be listed first in the font
stack. How would deviating from these guidelines affect the display of the web page on different
machines?
2. Quick Quiz:
1
1
11
1
12
2
2:
:
:
D
D
De
e
ec
c
cl
l
la
a
ar
r
re
e
e
a
a
a
F
F
Fo
o
on
n
nt
t
t
F
F
Fa
a
am
m
mi
i
il
l
ly
y
y
LECTURE NOTES:
• Explain to students that to specify fonts in your CSS code, you use the font-family property. The
property value is a font stack that includes one or more font family names and ends with a generic
font family name.
• Explain that the font-family property is an attribute, whose value is a font stack. Point out that this
attribute-value pair can be placed in any style rule, and would affect the elements selected in the
selector portion of that style rule.
• Tell students that downloadable fonts often include a CSS @font-face rule containing descriptors
optimized to work with a wide range of user agents.
• Emphasize that when using downloadable fonts, an @font-face rule provides user agents the font
name, file names, and file downloadable font.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 4 of 14
TEACHER TIP
Show students the general form of an @font-face rule as follows:
@font-face { <font-description> }
Where <font-description> has the form:
descriptor: value;
descriptor: value; …
FIGURES: E-2, E-3, E-4
BOXES:
1. Quick Tip: Throughout this unit, compare your code to the figures to confirm indents and
placement.
4. Trouble: If you don’t see a difference in the display of the paragraphs, your system may not
have the Tahoma font installed.
5. Clues to Use: Choosing fonts
When deciding which fonts to use for a website, it’s important not to use too many fonts, which
can make a page chaotic and make it hard for users to understand the relationships among the
page contents. A common practice for a basic web page is to start with just two fonts: one serif
font and one sans-serif font. The rule of thumb for web design is serif fonts for headings and
sans-serif fonts for paragraphs. You can use your browser’s developer tools to identify the fonts
used by sites you visit.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Have students review various websites specifically for their use of font. Explain
that it is considered good practice to use just two fonts. How many of the websites they reviewed
followed this practice? Do they agree with this limitation? Why or why not? Tell students to use their
review of the websites to support their ideas.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 5 of 14
LAB ACTIVITY
1. Provide students with a specification for a simple personal web page. For example, one that includes
their name, phone number, email address, and a picture of themselves. Ask students to use the
provided layout of the web page to format the page to be written in different fonts. You may want
to specify to students how many font families should be included in their font stacks, or to require
that at least one element include a downloadable font.
1
1
11
1
14
4
4:
:
:
U
U
Us
s
se
e
e
a
a
a
C
C
Cu
u
us
s
st
t
to
o
om
m
m
F
F
Fo
o
on
n
nt
t
t
LECTURE NOTES
• Point out to students that using only the fonts installed on a user’s device can be limiting and can
result in layouts that don’t display uniformly across platforms.
• Explain that one way around this is to use custom fonts, such as those provided by Google.
• Demonstrate how to access a custom font through Google Fonts, using FIGURE E-5 as your guide.
• Be sure students understand that Google Fonts generates a link to the font they want to use, and
that they must copy that link and past it in a link element in their HTML document.
TEACHER TIP
Explain to students that Google Fonts defaults to providing only the normal version of a font.
Discuss why this is beneficial. Be sure students understand that they can identify other versions of
the font they want as well, such as italic or bold versions.
BOXES:
1. Quick Tip: Viewing a style sheet was not supported by IE at the time this book was written.
CLASSROOM ACTIVITIES
1. Critical Thinking: Why does Google Fonts default to providing only the normal version of a
font? Why should you avoid including too many variants of the font on your web page?.
2. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 6 of 14
LAB ACTIVITIES
1. Have students explore the Google Fonts website and then experiment with downloading fonts
from the site. Have students create a simple web page they can use to demonstrate the different
fonts they downloaded. Encourage students to download variants of the same font, as well as
several different fonts. Have students summarize their thoughts on using use the Google Fonts
website.
1
1
11
1
16
6
6:
:
:
D
D
De
e
ec
c
cl
l
la
a
ar
r
re
e
e
F
F
Fo
o
on
n
nt
t
t
S
S
Si
i
iz
z
ze
e
e
a
a
an
n
nd
d
d
L
L
Li
i
in
n
ne
e
e
H
H
He
e
ei
i
ig
g
gh
h
ht
t
t
LECTURE NOTES
• Explain to students that the font size of an element can be specified using the CSS font-size
property.
• Point out that the font-size property can be applied to any web page element that includes text.
• Illustrate different units in which font sizes can be specified. Explain that the most widely
supported units are percents and em.
TEACHER TIP
Review units used to express font-size values, including ems, pixels, and rems.
• Explain that in addition to setting font-size, students can also set line height using the line-height
property. Point out that this property is used to set the minimum amount of vertical space each line
occupies.
• Be sure students understand that each font family includes blanks space above and below every line
of text and that students can use the line-height property to increase this space.
FIGURES: D-9-, D-10, D–11
BOXES
1. Quick Tip: Some developers prefer to reset the font size for all elements, including headings, to
an explicit size in pixels, and then declare a font size for each heading.
2. Quick Tip: Choosing a line-height value is often a process of trial and error to find a value that
works best for your layout.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 7 of 14
and another begins. In addition, you can create specific visual effects by varying the amount of
white space in a design. You can see the padding property to create white space around an
element that shares that element’s background color, and you can use the margin property to
create white space that uses the background color of the parent element.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to consider a situation in which a user defines two style rules
applying to two different elements. In one of the style rules, the user uses em units, and in another
the user uses pixel units to specify the font size. How would the presentation of the web page
change when viewed on a very small screen, such as a mobile device, or on a very large screen?
2. Quick Quiz:
1
1
11
1
18
8
8:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
B
B
Bo
o
ol
l
ld
d
d
a
a
an
n
nd
d
d
I
I
It
t
ta
a
al
l
li
i
ic
c
cs
s
s
LECTURE NOTES
• Point out that CSS enables you to format text in numerous ways, including making text bold and
italic.
• Introduce students to the font-weight property, which is used to make text bold by using the ‘bold’
value.
• Introduce students to the font-style property, which is used to add italics to text by using the ‘italic’
value.
• Explain to students that bold and italic styles are often applied to words or phrases, and not to
whole paragraphs. These short sections must be identified by an element in order to create a specific
style rule for them.
• Introduce to students the span element, which is used to indicate a section of a paragraph to format
using bold or italic styles. Explain that this element is similar to the div element, but it allows
developers to isolate a specific section of a larger element. Explain that a span element transforms
the text it contains into an object on the web page to which styles can be applied. Point out that
including an id attribute allows developers to create style rules that affect only the contents of the
span element.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 8 of 14
• Discuss the font properties presented in TABLE E-3.
FIGURES: D-12, D-13, D-14
BOXES
None
CLASSROOM ACTIVITIES
1. Critical Thinking: What would be the implications of including multiple span elements in a single
web page? Is there any reason to nest span elements one inside of the other? If not, explain why not.
Otherwise, give an example of a situation where nested span elements would be helpful.
2. Quick Quiz:
LAB ACTIVITIES
1. Have students create a simple web page with their name and address. Tell students to
demonstrate how to use the font properties discussed in TABLE E-3 to format their name and
address.
1
1
12
2
20
0
0:
:
:
S
S
St
t
ty
y
yl
l
le
e
e
P
P
Ps
s
se
e
eu
u
ud
d
do
o
o–
–
–e
e
el
l
le
e
em
m
me
e
en
n
nt
t
ts
s
s
LECTURE NOTES:
• Introduce the concept of a pseudo-element, which is a selector that enables a developer to isolate a
portion of a larger element for styling. Explain that a pseudo-element is an alternative to a span
element.
• Explain the syntax of writing a pseudo-element, which is the element you want to style, followed
by a colon (:), and then followed by the name of the pseudo-element. Discuss the five commonly
used pseudo-elements presented in TABLE E-4.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 9 of 14
FIGURES: E-15, E-16, E-17
TABLE E-4: CSS pseudo-elements
BOXES:
1. Quick Tip: Selecting the most appropriate line-height value for a drop cap often requires trial
and error.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Look at TABLE E-4, and suggest at least one situation in which you would use the
pseudo elements :before, :after, and :selection.
LAB ACTIVITY
1. Ask students to use pseudo-elements to format their personal Web page so that in each paragraph
the first line is in a different size and color than the other lines in the paragraph. How many style
rules are added to the style sheet? How many style rules would be added if they are required to set
the first line of each paragraph to be a unique color with respect to first lines of other paragraphs?
1
1
12
2
22
2
2:
:
:
S
S
Sp
p
pe
e
ec
c
ci
i
if
f
fy
y
y
H
H
He
e
ex
x
x
a
a
an
n
nd
d
d
R
R
RG
G
GB
B
B
C
C
Co
o
ol
l
lo
o
or
r
rs
s
s
LECTURE NOTES
• Introduce the background-color property and explain that CSS allows you to specify the
background color of web elements using this property.
• Explain the different ways a color can be specified: name, hexadecimal format, rgb format, and hsl
format. Use TABLE E-5 as a guide.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 10 of 14
• Illustrate the structure of color definition in the hexadecimal system: the color definition starts with
a # symbol followed by six characters which may include 0-9 and a-f, where the first two characters
specify the red value, the second two characters specify the green value, and the last two characters
specify the blue value.
TEACHER TIP
Remind students that when using the rgb system, they must be consistent in the units used to
define the red, green, and blue values for a specific color. That is, students should use either
percentages or numeric specification for all three values within a given color definition, and should
not define a color by providing some of the rgb values in percentages and others in numeric
specification.
• Explain the hsl system, which enables a user to create colors by providing values for hue, saturation,
and light.
FIGURES: E-18, E–19
TABLE E-5: CSS color systems
BOXES
1. Quick Tip: Letters in hexadecimal values are not case-sensitive.
2. Quick Tip: In addition to background-color, hex and RGB colors can be used as values for color,
margin-color, or any other property that takes a color as its value.
3. Clues to Use: Understanding hexadecimal values
The two RGB color systems—using a triplet of RGB values or using hexadecimal values—allow
you to specify the same 16.7 million colors. Each value in an RGB triplet can range from 0 to
255, giving you 256 possible values (1–255, plus the value 0). Hexadecimal values provide the
same range using only two characters. The standard decimal numbering system allows 10
possibilities for each digit: the numbers 0–9. Hexadecimal (from roots meaning “six” and “ten”)
offers 16 possibilities for each character: the numbers 0–9 plus the letters A–F.
CLASSROOM ACTIVITIES
1. Critical Thinking:
a. You are creating a website for selling yarn, and want to list the yarn names in the color of the
yarn. Which format system would you use for this purpose? Explain which system would give
you the most flexibility and best change of matching the yarn color accurately.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 11 of 14
b. You are designing a website in a cooperation with web designers in France, Russia, and Brazil.
Which color formatting system would be least suitable for this purpose? Explain your answer.
2. Quick Quiz:
LAB ACTIVITY
1. Ask students to create a web page that has four identical lines in it. Have them format each of
the lines with a different one of the four color defining schemes, and try to make sure all the
lines are in the same color. How long did it take students to get the colors correctly for each of
the systems? What can they conclude about each of the systems for a situation in which they
want to use a specific color?
1
1
12
2
24
4
4:
:
:
A
A
Ad
d
dd
d
d
S
S
Sh
h
ha
a
ad
d
do
o
ow
w
ws
s
s
LECTURE NOTES:
• Show examples of a text shadow in print layouts – the appearance of a shadow on a surface behind
each letter.
• Demonstrate to students how to create text shadows using the CSS3 text-shadow property. Be sure
to explain the four values it takes: horizontal offset, vertical offset, blur, and shadow color.
TEACHER TIP
Point out to students that multiple text shadows can be applied using a single text-shadow property.
• Explain that in print media, shadows are not limited to text, they can be used on entire units of page
content.
• Introduce the CSS3 box-shadow property and explain its functionality in applying a shadow to
many Web page elements.
• Discuss the syntax of text-shadow and box-shadow properties, using TABLE E-6 as your guide.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 12 of 14
2. Clues to Use: Picking a color scheme
Although hex and RGB values make over 16 million colors available for use on your web pages,
it’s best not to try to use all of them at once. In fact, visual designs often use only two or three
colors that complement each other.
In any color scheme, the colors are not used equally—generally, one or two of the colors are
reserved as accent colors. Many free tools are available to help you create color schemes. You
can use a website, such as paletton.com to identify complementary colors and create a color
scheme. You can also install the free Adobe Color app on a mobile device to automatically
generate a color scheme using your camera.
CLASSROOM ACTIVITIES
1. Quick Quiz:
1. Critical Thinking:
a. You are creating a Web page for a stonemason, who wants the text in his Web page to look
as if it is chiseled into the surface, just like a chiseled stone would look. How can you
achieve this look using the text-shadow property?
b. You are creating a Web page for a tattoo artist, who wants the box around the letters in the
header of his Web page to have glowing borders, to give the effect of glowing sign. How can
you achieve this look using the box-shadow property?
LAB ACTIVITY
1. Ask students to add a shadow to their name on their personal Web page. Have them try different
values for the text-shadow property, including negative values. How do negative values affect the
shadow? What uses can students think of for a shadow with negative offset values?
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 13 of 14
1
1
12
2
26
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
M
M
Me
e
ed
d
di
i
ia
a
a
Q
Q
Qu
u
ue
e
er
r
ry
y
y
LECTURE NOTES:
• Introduce the terms @media rules and media queries.
• Explain that a media query starts with the keyword @media, lists one or more values for media
type, and then specifies style rules specific to this media.
BOXES:
1. Quick Tip: Different browsers may render the page slightly differently, such as wrapping text or
displaying box shadows.
2. Clues to Use: Creating media-specific styles using other methods
In addition to creating a media query within a style sheet, you can incorporate styles targeted at
specific media in your web documents in different ways. One option is to place the media
specific styles in their own style sheet document, link that style sheet to the HTML file using a
separate link element, and then use the media attribute to specify the appropriate media type(s).
Especially on a larger website where the style sheets consist of hundreds or thousands of lines of
code, dividing up style sheets in this manner can help keep the styles organized, and can allow
different team members to work on different documents simultaneously without interfering
with each other’s work. Note that if you use multiple link elements, the general style sheet
should come first in the HTML code, followed by the media-specific styles so that the general
styles do not override the media-specific styles when rendered by a user agent.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Why is it important to include a media query with a print media type for a
web page form?
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit E Page 14 of 14
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.
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
@page rule (122)
block-level element (118)
custom font (110)
downloadable font
font family (110)
font stack (110)
generic font family (110)
hex system (122)
hexadecimal system (122)
rgb triplet (122)
sans-serif font (110)
Serif (110)
serif font (110)
white space (117)
inline element (118)
media query (122)
pseudo-element (120)
rgb system (122)
Top of Document