PPT 1.1
HTML5 and CSS3 – Illustrated, 2nd. Edition
Unit C: Getting Started 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
56: Assess Style Rules
2
58: Create an Embedded Style Sheet
4
60: Implement an id Selector
5
62: Implement a Class Selector
6
64: Use Multiple Selectors
7
66: Create an External Style Sheet
8
68: Link to an External Style Sheet
10
70: Add a comment to a Style Sheet
72: Debug and Validate CSS Code
11
12
End of Unit Material
14
Glossary of Key Terms
14
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C 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 C when they can:
• Assess style rules
• Create an embedded style sheet
• Implement an ID selector
• Implement a class selector
• Use multiple selectors
• Create an external style sheet
• Link to an external style sheet
• Add a comment to a style sheet
• Validate your CSS code
5
5
56
6
6:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
S
S
St
t
ty
y
yl
l
le
e
e
R
R
Ru
u
ul
l
le
e
es
s
s
LECTURE NOTES
• Describe how to use CSS to add styling information to elements defined in the HTML code for a
web page rather than adding the formatting elements in the body of the HTML document, such
as background color or text alignment.
• Define a CSS property. Tell students a CSS property is an aspect of the appearance of a web page
element that can be modified.
• Explain that the basic building block of CSS code is the declaration, which is a combination of a
property name and a value.
• Define style rules as lines or blocks of CSS code that specify the presentation of web elements.
• Explain the syntax of a style rule: one or more selectors, which identify the HTML elements the
style rule should be applied to, and one or more attribute-value pairs to specify how the
selected elements should be formatted.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 3 of 14
TEACHER TIP
Make sure that students are aware that one style rule can include multiple selectors. For
example, in order to apply the same formatting information to all header sizes, there is no need
to write six different style rules. Rather, a single style rule including six type selectors is
appropriate, and would look like this:
h1, h2, h3, h4, h5, h6 {
attribute-value pairs
}
• Point out that CSS supports attributes for many different aspects of HTML formatting and
presentation, and that multiple attributes can be defined for each formatting area. Allowable
values are specific to each attribute, and vary widely between attributes.
TEACHER TIP
Point out that the correct values for a specific attribute can be looked up online in CSS
references such as www.w3c.org
FIGURES: C-1, C-2
TABLE C-1: CSS properties and values
BOXES:
1. Quick Tip: Appendix B provides a reference for many commonly used CSS properties and
their values.
2. Quick Tip: To learn more about a specific CSS property, you can look it up in an online CSS
reference such as the one at developer.mozilla.org/en-US/docs/Web/CSS/Reference.
3. Clues to Use: Spacing your CSS code
Web page rendering engines recognize attribute-value pairs after a selector as starting after
an opening curly brace { and ending with the closing curly brace }. As long as a semicolon
follows each value, any number of spaces, tabs, and new lines can occur within a set of
attribute-value pairs. As a result, the appearance of CSS code can vary widely. Most
developers prefer to give each declaration its own line, often indented beneath its selector,
as shown in FIGURE C-1, to make the code easier to read. Others prefer to keep all
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to think of reasons why it is helpful and important to use CSS to
format a web page rather than using HTML formatting elements. Specifically, they should compare
websites containing a single page compared to websites containing multiple pages.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 4 of 14
2. Quick Quiz:
5
5
58
8
8:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
E
E
Em
m
mb
b
be
e
ed
d
dd
d
de
e
ed
d
d
S
S
St
t
ty
y
yl
l
le
e
e
S
S
Sh
h
he
e
ee
e
et
t
t
LECTURE NOTES:
• Explain that there are several different ways to apply CSS styles to web page elements, and that
the most straightforward method is embedding the CSS code in the head of an HTML
document (called an embedded style sheet).
• Point out that embedded CSS code is particularly suitable for single web pages, and is less
suitable for websites with multiple pages.
TEACHER TIP
Point out that multiple style rules can be included in a single <style> tag.
BOXES:
1. Trouble: Because some code editors indent automatically, you may not need to press
[Spacebar] to indent. As your work through this unit, use the figures to check for and
match indenting.
2. Quick Tip: Styles applied to an element also apply to any elements nested within that
element. This means that declarations assigned to the body element apply to all elements on
the page.
3. Quick Tip: If the background color in your web document is white instead of ivory, verify
that you entered each declaration between the opening and closing curly braces, and that
each value ends with a semicolon.
4. Clues to use: Understanding the type attribute of the style element
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 5 of 14
contents of a style element are written in CSS. Therefore, you do not need to specify the
type attribute when using the HTML5 DOCTYPE (<DOCTYPE html>).
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F Embedded style sheets are particularly suitable for websites that have multiple
2. Classroom Discussion: Assume that you are in the process of creating a draft for a website
containing a single page. Because this is a draft, you expect that there will be changes to the layout
of the web page. Discuss whether this project is suitable for using an embedded style sheet.
LAB ACTIVITY
1. Provide students with a specification for a simple personal web page, for example one that
includes their name, phone number, e-mail address, and a picture of themselves. Provide a
layout or style guide for the web page, and have students use the information in TABLE C-1
(previous lesson) and FIGURE C-4 to style their web page according to the provided guide.
6
6
60
0
0:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
a
a
an
n
n
I
I
ID
D
D
S
S
Se
e
el
l
le
e
ec
c
ct
t
to
o
or
r
r
LECTURE NOTES
• Provide examples of situations in which you would want to give a specific style to one instance
of an element, but not to other instances of the same element, e.g., when you are quoting three
authors and want to stress one of them by making it boldface.
• Point out that type-based style rules affect all instances of the specified type and are not
suitable for a situation in which only one instance is affected.
TEACHER TIP
If you want to give multiple elements the same formatting, but it is inappropriate to use a type
selector, each of the elements to be affected by the style rule must have a unique id value, and
the id selector should specify all the ids, e.g., #id1, #id2, #id3 { attribute value pairs }.
FIGURES: C-6, C-7, C-8
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 6 of 14
BOXES
1. Quick Tip: Only one element in an HTML document can have a given id attribute value
because each id attribute value in a document must be unique.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to consider a situation in which a type based style rule and an id
selector based style rule contradict each other. For example, an HTML page includes an h1 element
with the id “date”. A type selector style rule specifies that all h1 elements should be centered,
whereas an id selector style rule specifying the element having the id “date” indicates that this
element should be aligned to the right. How should the element be displayed? Which of the style
rules, if any, should take precedence?
2. Quick Quiz:
a. In order to create an id selector, the element to be affected must include the id attribute
6
6
62
2
2:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
a
a
a
C
C
Cl
l
la
a
as
s
ss
s
s
S
S
Se
e
el
l
le
e
ec
c
ct
t
to
o
or
r
r
LECTURE NOTES
• Point out that sometimes a web page author wants to apply a style rule to multiple elements
without adding a layer of HTML code. For example, if the elements to be affected by the style
• Describe the HTML class attribute, and explain that the class attribute differs from the id
attribute in that the id attribute limits a given value to a single element in the web page, while
the class attribute does not have this limit; with the class attribute, multiple elements can have
the same value.
FIGURES: C-9, C-10, C-11
BOXES
1. Quick Tip: Developers generally use class names that describe the goal of the formatting,
such as
accent
, rather than describing the content, like
blue
.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 7 of 14
2. Clues to Use: Inserting multiple attributes
There is no limit to the number of attributes you can include in a single HTML element.
Thus, you can apply multiple style rules to a single element using any combination of a
single id attribute and one or more class attributes. For example, you might assign a class to
every paragraph in a given section of a web page, along with an id for the first paragraph in
the section to add extra elements to its style. The code for the opening tag might look as
follows:
3. Clues to Use: Deciding whether to use an ID or a class selector
The fact that only one element in a web document can have a given id attribute value can
cause problems, especially in large documents. If you inadvertently add the same id
attribute value to multiple elements on a page, the results in the browser may not be what
you expected. In addition, changes to your HTML code may expose problems that weren’t
CLASSROOM ACTIVITIES
1. Critical Thinking: Although this is not true in practice, assume that you can only apply a single
class value to each HTML element. Suppose that Jim is writing a website listing all of his friends
and their phone numbers, and wants to format the list according to the interests of his friends. Any
friends interested in trains will be listed in boldface, any friends interested in cars will be listed in
italic, and any friends interested in baseball will be listed in red letters. How many classes will Jim
need to create in order to achieve the desired presentation of his list?
2. Quick Quiz:
a. T/F Multiple HTML elements in a web page can have the same value for the class
b. T/F A specific value for the class attribute can only be assigned to elements that appear
6
6
64
4
4:
:
:
U
U
Us
s
se
e
e
M
M
Mu
u
ul
l
lt
t
ti
i
ip
p
pl
l
le
e
e
S
S
Se
e
el
l
le
e
ec
c
ct
t
to
o
or
r
rs
s
s
LECTURE NOTES
• Explain that sometimes you want to assign the same CSS properties to the HTML elements specified
by multiple selectors.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 8 of 14
• Explain that you could create one style rule and then duplicate it for each HTML element but be
sure students understand this is not the most efficient way to handle this situation.
• Tell students that an easier way to handle this situation is to create multiple selectors for the same
style rule.
TEACHER TIP
Make sure students understand the syntax of each example in TABLE C-2. For example, be sure
students understand the > is use to identify an element that is a direct child of the parent element.
Discuss the difference between the selector h1 and the selector article>h1.
FIGURES: C-12, C-13, C-14
TABLE C-2: Commonly used CSS selectors
BOXES:
1. Quick Tip: For more information about color names that you can use in HTML documents, see
CLASSROOM ACTIVITIES
1. Critical Thinking: Design an organizational-type chart to show the relationship between different
elements. Have students talk about the elements as parent elements, child elements, direct next sibling
elements, next sibling elements, and descendent elements. Once students are comfortable naming the
relationships, point to an element and have children write a selector for that element, using TABLE C-2
as a guide.
2. Quick Quiz:
a. T/F Using multiple selectors with one style rule is less efficient that using single selectors
b. T/F You use a multiple selector when you want to apply the same style rule to more than one
6
6
66
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
E
E
Ex
x
xt
t
te
e
er
r
rn
n
na
a
al
l
l
S
S
St
t
ty
y
yl
l
le
e
e
S
S
Sh
h
he
e
ee
e
et
t
t
LECTURE NOTES:
• Remind students of the disadvantages of using embedded style sheets for websites containing
multiple pages. Point out the disadvantage of trying to keep style sheets consistent between
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 9 of 14
multiple pages because any change to the style sheet must be implemented on each page
separately.
• Define an external style sheet as a separate file containing style information that multiple web
pages can link to.
• Show an example of an external style sheet, such as the one shown in FIGURE C-15.
FIGURES: C-15, C-16, C–17
TABLE C-3: Attributes of the link element
BOXES:
1. Quick Tip: If you are using TextEdit on a Mac, click Format, then click Make Plain Text if it
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F An external style sheet is practical when you want multiple web pages to have a
b. T/F An external style sheet must include the HTML <style> tag in order for the web
2. Classroom Discussion: Suppose that you created a website that includes six web pages, all of
which are linked to a single external style sheet. You now want to change the font of all the text in
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 10 of 14
your website. How many files will you need to change in order to achieve this? Does your answer
change if you are restricted to writing only a single new style rule?
LAB ACTIVITY
1. Explain to students that they are creating a website for a book store. Ask students to create
web pages for a few of their favorite books, including relevant information such as title,
6
6
68
8
8:
:
:
L
L
Li
i
in
n
nk
k
k
t
t
to
o
o
a
a
an
n
n
E
E
Ex
x
xt
t
te
e
er
r
rn
n
na
a
al
l
l
S
S
St
t
ty
y
yl
l
le
e
e
S
S
Sh
h
he
e
ee
e
et
t
t
LECTURE NOTES:
• Explain that once an external style sheet is created, it can be linked to multiple web pages by
adding a link element referencing the style sheet to each HTML document.
• Point out that any changes made to the external style sheet are immediately applied to all web
pages linked to the style sheet.
• Show the syntax for linking a web page to a style sheet:
• Explain that the rel attribute tells user agents to interpret the linked document as a stylesheet,
and the href attribute specifies the location of the external style sheet.
• Be sure students understand that if they create more than one style sheet, then they need to
include a link reference to each style sheet they want to associate with the HTML document.
TEACHER TIP
Remind students that in order for changes made to a style sheet to show in the web pages that
are linked to the edited style sheet and already open in a user agent, the web pages must be
refreshed or reloaded.
FIGURES: C-18, C-19, C-20
BOXES:
1. Quick Tip: If you are using TextEdit on a Mac, click the Ignore Rich Text Commands check
box in the Open dialog box to select it for any HTML file you open.
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F You can apply styles in an external style sheet to every page in a website simply by
b. T/F Changes made to an external style sheet impact all web pages linked to that style
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 11 of 14
7
7
70
0
0:
:
:
A
A
Ad
d
dd
d
d
a
a
a
C
C
Co
o
om
m
mm
m
me
e
en
n
nt
t
t
t
t
to
o
o
a
a
a
S
S
St
t
ty
y
yl
l
le
e
e
S
S
Sh
h
he
e
ee
e
et
t
t
LECTURE NOTES
• Remind students how useful comments in HTML documents are themselves as they work on their
web pages and for other developers who might review or use their web pages.
• Explain that, like HTML documents, CSS documents can include comments as well.
TEACHER TIP
Make sure students understand how important the comment at the beginning of the CSS file is.
Explain that this information is used to identify the name of the file, the author of the file, the date
the file was created, and any other pertinent information. Use FIGURE C-21 as you discuss one
possible format for this comment information. Remind students that comments can also be on one
line.
• Point out that developers often use comments to help identify sections or main ideas that explain
what type of style rules follow.
• Be sure students understand there are no standard comments that need to be included but that they
should include comments that will be helpful to them and other developers. Remind students it is
helpful to use a similar structure for their comments so that as they move between style sheets they
will be able to quickly find the information they want.
FIGURES: C-21, C-22, C–23
BOXES:
1. Quick Tip: Just as with HTML comments, you can enter the opening and closing characters for a
CSS comment on the same line with content between them.
2. Clues to Use: Organizing CSS code
As a style sheet grows, it’s important to keep it organized so you can quickly find style rules you
want to edit. One of the most common methods of organization in CSS is to mirror the structure
of the HTML document(s) to which the style sheet is applied. For instance, a style rule for the
body element, which affects the entire document, would go at the start of a style sheet, followed
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 12 of 14
Sometimes it makes sense to style content in two different parts of the document with a
single style rule—for instance, to apply similar styles to all p elements, or to both the header
3. Clues to Use: Viewing CSS comments in code editors
As with other parts of HTML and CSS code, many code editors automatically generate the
closing comment characters for a CSS comment after you enter the opening characters, and they
may automatically indent any lines between the opening and closing characters. In addition,
some editors apply other informal standards to make CSS comments easier to view and read.
CLASSROOM ACTIVITIES
1. Class Discussion: Discuss with students why they would want to include comments in their HTML
and CSS files. Have students explain the type of comments they might include in each type of file.
Suggest students provide examples of the types of comments they might include in each type of file.
Have students explain why the comments in the HTML document will be different from the comments
in the CSS document.
2. Quick Quiz:
7
7
72
2
2:
:
:
D
D
De
e
eb
b
bu
u
ug
g
g
a
a
an
n
nd
d
d
V
V
Va
a
al
l
li
i
id
d
da
a
at
t
te
e
e
C
C
CS
S
SS
S
S
C
C
Co
o
od
d
de
e
e
LECTURE NOTES:
• Explain the importance of validating a style sheet against CSS code in order to ensure
compatibility with different user agents and to help make sure that the code remains usable
following changes to CSS specifications.
• Discuss the use of developer tools, which are built into all modern browsers, to debug code.
• Explain that these tools let developers inspect CSS properties and values for each element in a
document, as well as view which declarations are applied to an element. Use FIGURE C-25 to
discuss the some of the developer tools in Google Chrome.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 13 of 14
• Point out to your students that there are several online CSS validators that allow them to copy
and paste code from an embedded style sheet or to upload a .css file. As an example, show your
FIGURES: C-24, C-25, C-26
BOXES:
1. Quick Tip: On a Mac, hold [command] and click the contact information, the click Inspect
element.
5. Clues to Use: Choosing between different possible selectors
Sometimes when creating a style rule, you’ll find that you have a choice between two or more
different selectors that could perform the same task. For instance, if you want to style all the
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F It is important to correct errors in CSS code because it can ensure that a web page
b. T/F If you make an edit to a declaration using the browser tools, that edit is
2. Quick Quiz:
a. In order to validate your style sheet, you can copy and paste your style sheet
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit C Page 14 of 14
LAB ACTIVITY
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.
•
•
•
Independent Challenge 4: Explore – Using a real world focus to apply the unit skills, students
perform tasks or create documents that will benefit their everyday lives.
•
•
•
Visual Workshop – a practical, self-graded capstone project that requires independent problem
solving.
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
class selector (62)
CSS3 (56)
Declaration (56)
developer tools (72)
embedded style sheet (58)
external style sheet (66)
ID selector (60)
Selector (56)
Specificity (72)
Style rule (56)
type selector (56)
Inheritance (56)
inline style (67)
Property (56)
Top of Document