Chapter 7 – Using Advanced Cascading Style Sheets
MULTIPLE CHOICE
1. If you have several Web pages and need a consistent style that can be easily updated, ____ is a good
choice.
a.
DHTML
c.
XML
b.
CSS
d.
both a and c
2. An external style sheet must be saved as a(n) ____ file.
a.
.html
c.
.ext
b.
.xml
d.
.css
3. A(n) ____ statement must be inserted into all Web pages in which you want to use an external style
sheet.
a.
index
c.
link
b.
connect
d.
attach
4. All of the following are types of CSS EXCEPT ____.
a.
embedded
c.
dynamic
b.
inline
d.
external
5. A ____ is a rule that defines the appearance of an element on a Web page.
a.
style
c.
format
b.
view
d.
cascade
6. A style ____ is a series of rules that defines the style for a Web page or an entire Web site.
a.
grid
c.
document
b.
sheet
d.
table
7. A(n) ____ style sheet is used to change the style within an individual HTML tag.
a.
embedded
c.
inline
b.
external
d.
dynamic
8. Which of the following kinds of style sheets are overridden by inline styles?
a.
embedded
c.
neither a nor b
b.
external
d.
both a and b
9. A(n) ____ style sheet is used to change the style of one Web page.
a.
embedded
c.
inline
b.
external
d.
dynamic
10. A(n) ____ style sheet is used to change the style of multiple pages in a Web site.
a.
embedded
c.
inline
b.
external
d.
dynamic
11. For Web pages in which you want a common look, use ____ style sheets.
a.
embedded
c.
inline
b.
external
d.
dynamic
12. If you want to change the style of one or a few sections of a single Web page, then using ____ style
sheets is the most appropriate
a.
embedded
c.
inline
b.
external
d.
dynamic
13. The ____ property is a good way to add additional space between words.
a.
tracking
c.
kerning
b.
leading
d.
word-spacing
14. The code for an embedded style sheet must be inserted between start and end ____ tags.
a.
<style>
c.
comment
b.
<format>
d.
<css>
15. Within the style tag container, Web developers generally follow the coding practice to add HTML
____ tags.
a.
index
c.
comment
b.
body
d.
format
16. Which of the following is NOT a way to add the line-height value?
a.
by number
c.
by length
b.
by percentage
d.
by style
17. If you specify line-height by number, the browser uses the ____ property to determine the space.
a.
font-size
c.
line-space
b.
line-size
d.
tracking
18. The padding property uses the ____ property code.
a.
shorthand
c.
concatenated
b.
abridged
d.
indexed
19. In the padding property statement, padding: 25px 50px 75px 100px; the top padding is ____.
a.
100px
c.
50px
b.
75px
d.
25px
20. In the padding property statement, padding: 25px 50px 75px; the left padding is ____.
a.
100px
c.
50px
b.
75px
d.
25px
21. The ____ is a very useful unit in CSS because it adapts automatically to the font size that the Web
page visitor uses.
a.
ex
c.
pica
b.
em
d.
point
22. Which of the following is a measurement value for padding?
a.
&
c.
er
b.
pt
d.
pd
23. One ____ is the x-height of a font.
a.
pc
c.
pt
b.
ex
d.
em
24. The measurement x-height is usually about ____ the font size.
a.
one-eighth
c.
half
b.
one-quarter
d.
double
25. A(n) ____ is equivalent to 1/72 of an inch.
a.
pica
c.
pixel
b.
point
d.
em
26. A(n) ____ is equivalent to 12 points.
a.
pixel
c.
ex
b.
pica
d.
em
27. If you do not use the ____ property, the elements display on the Web page in the order in which they
appear.
a.
order
c.
placement
b.
index
d.
position
28. The ____ code sets the style so that the Web page element remains constant and does not move.
a.
placement: fixed
c.
order: absolute
b.
index: permanent
d.
position: absolute
29. Which of the following is NOT a position property value?
a.
dynamic
c.
absolute
b.
fixed
d.
static
30. The ____ property value generates an absolutely positioned element, positioned relative to the first
parent element that has a position other than static.
a.
absolute
c.
fixed
b.
relative
d.
static
31. The ____ property value generates an absolutely positioned element, positioned relative to the browser
window.
a.
absolute
c.
fixed
b.
relative
d.
static
32. The ____ property value generates a relatively positioned element, positioned relative to its normal
position.
a.
absolute
c.
fixed
b.
relative
d.
static
33. The ____ property value places the element in the normal flow.
a.
absolute
c.
fixed
b.
relative
d.
static
34. The ____ property value is the default.
a.
absolute
c.
fixed
b.
relative
d.
static
35. You can specify font-weight using numerical values from ____.
a.
1 to 10
c.
100 to 1000
b.
100 to 900
d.
1000 to 5000
36. With the font-weight property, normal text that is not bold has a value of ____.
a.
4
c.
400
b.
40
d.
4000
37. With external style sheets, the link statement is placed between the ____ tags.
a.
<html> </html>
c.
<head> </head>
b.
<body> </body>
d.
<css> </css>
38. You can set specific styles using the ____ tags.
a.
<div> </div>
c.
<css> </css>
b.
<set> </set>
d.
<format> </format>
39. The ____ model describes the structure of the elements that are displayed on the Web page.
a.
space
c.
visual
b.
spatial
d.
box
40. Which of the following is not an element of the box model?
a.
content
c.
padding
b.
border
d.
format
MULTIPLE RESPONSE
Modified Multiple Choice
1. Using HTML tags and CSS to change the way a Web page appears in a Web browser, such as adding
____, is known as the style of the Web page.
a.
italic
c.
colors
b.
headings
d.
tables
2. If a style is intended for most (or all) of the Web pages on a Web site, you may want to use a(n) ____
style sheet.
a.
dynamic
c.
external
b.
embedded
d.
inline
3. Which of the following is a length unit used with the word-spacing property?
a.
inches
c.
centimeters
b.
points
d.
picas
4. Which of the following is a unit of measurement you can use with the line-height property?
a.
inch
c.
em
b.
pt
d.
ex
5. You can use shorthand properties with ____.
a.
padding
c.
borders
b.
margins
d.
fonts
MODIFIED TRUE/FALSE
1. For Web sites with many Web pages that have a common look, a(n) embedded style sheet may be the
best option. _________________________
2. The embedded style sheet overrides inline style sheets. _________________________
3. The embedded style sheet is good to use if you want the style to affect one (or a few) Web pages, and
not all pages across the Web site. _________________________
4. With the line-height property, you can control the horizontal spacing between lines of text.
_________________________
5. The unit 1ex is equal to the current font size. _________________________
TRUE/FALSE
1. Although CSS allows Web developers to make changes to the design of a Web page, CSS is limited in
its ability to define the appearance, or style, across one or more Web pages.
2. CSS is rarely used for formatting Web pages with tabular material because it is ill-suited to the task.
3. External style sheets override inline styles and embedded style sheets.
4. The greatest benefit of CSS is the ability to identify a style across a Web site.
5. If there are styles that are to be repeated in a particular Web page (or in a few pages), you would be
better off using an inline style sheet rather than an embedded style sheet.
6. If you want all paragraphs of text to have the same style within one Web page, then it makes more
sense to embed that style rather than add the style to each paragraph tag within the Web page.
7. If you find that the style from an embedded style sheet is used on more Web pages as time goes on,
you should create an external style sheet and link it into all Web pages in which you had previously
inserted an embedded style sheet.
8. HTML <style> tags are often used to hide any script language that an older browser cannot interpret.
9. You can specify all the padding values in a single property.
10. The padding property can have one to four values.
11. The ex unit adapts automatically to the font size that the Web page visitor uses.
12. The hover technique used for links adds a bit of interactivity and can be used to help highlight the
menu and submenu structure for the user.
13. With the font-weight property, each larger number is at least as bold as the one above it.
14. With the font-weight property, 100 is the boldest option of the font.
15. The user determines how bold each font-weight value is as he or she displays the Web page.
16. The embedded style sheet is the most powerful and lowest precedence style sheet.
17. Determining an effective structure of your Web pages involves correctly determining the box model
controls.
18. You can find an abundance of information on the box model troubleshooting tools like those in
Firebug or Google Chrome’s Developer Tools.
19. The general format of the <link> tag is <link rel=”stylesheet” type=”css” href=”sheetname.css” />.
20. To link a style sheet to a Web page, the <link> tag must use “text/css” as the value for the type
property.
21. In the tag, <link rel=”stylesheet” type=”css” href=”sheetname.css” />, the external style sheet is located
in the main or root directory of the Web site.
22. Paged media is the same as continuous media in that the content of the document is not split into one
or more discrete pages.
23. When Web site visitors print a Web page, they generally want to print the content of the Web page,
which would include a navigation menu bar, for example.
24. You can limit what prints by creating an external style sheet that is used specifically to se the styles for
a printed Web page.
25. Page selectors give a Web developer the flexibility to designate the first page, all left pages, or all right
pages.
COMPLETION
1. With ____________________ you can establish a standard look for all Web pages on a Web site.
2. The CSS ____________________ property gives you the ability to control line height.
3. The ____________________ property allows a Web developer to shorten the code.
4. A(n) ____________________ is a dot on the computer screen.
5. The unit ____________________ means pixels.
6. To expand the possibilities of CSS, you can use ____________________ (e.g., the link hover).
7. CSS ____________________ are used to add special effects to some selectors.
8. The ____________________ property is used to position an element on the Web page.
9. The ____________________ property value specifies that the value of the position property should be
inherited from the parent element.
10. In the box model, the ____________________ is the space between the content of the element and the
box border.
11. In the box model, the ____________________ specifies the space between the element and other
content on the Web page.
12. In the box model, the ____________________ is what surrounds the element content.
13. Once you have positioned the ____________________ on the Web page, you can control its
appearance by manipulating its padding, borders, and margins.
14. To link a style sheet to a Web page, the <link> tag must use “____________________” as the value
for the rel property.
15. A(n) ____________________ is a rectangular region that contains two areas: the page area and the
margin area.
16. The ____________________ area includes the elements (or boxes) laid out on the page.
17. The ____________________ area surrounds the page area, and is transparent.
18. Web developers can specify the margins of a page box inside a(n) ____________________ rule.
19. A(n) ____________________ rule contains the keyword @page, followed by an optional page
selector, followed by a block of declarations.
20. Using the ____________________ rule gives you the flexibility that you need in controlling printing
of a Web page.
MATCHING
Identify the letter of the choice that best matches the phrase or definition.
a.
inline
f.
shorthand
b.
embedded
g.
@page rule
c.
external
h.
page box
d.
pseudoclass
i.
page area
e.
box model
j.
margin area
1. A rectangular region that contains two areas: the page area and the margin area
2. Used to add special effects to some selectors
3. Property that allows a Web developer to shorten the code
4. Contains a keyword, followed by an optional page selector, followed by a block of declarations
5. Used to change the style of one Web page
6. Includes the elements (or boxes) laid out on the page
7. Used to change the style within an individual HTML tag
8. Describes the structure of the elements that are displayed on the Web page
9. Used to change the style of multiple pages on a Web site
10. Surrounds the page area
ESSAY
1. Briefly list and define the position property values, defining each.
2. Explain the box model. Be sure to define all appropriate terms in your explanation.
3. Explain the page box model, making sure to define all relevant terms in your response.
CASE
Critical Thinking Questions
Case 7-1
Libby has been charged with the task of making a series of changes to the Web site of her employer.
To do so, she decides to take advantage of Cascading Style Sheets (CSS). For each change, she needs
to choose between the three types of CSS: inline, embedded, and external.
1. Which of the following changes would Libby be most likely to implement using an embedded CSS?
a.
adding a drop-down menu that will appear on all of the pages of the Web site
b.
creating a separate style that will be used when users print any of the pages of the Web site
c.
changing the font style and size for a single paragraph on the Web site’s home page
d.
creating a new style that appears on a single page of the Web site
2. Which of the following changes would Libby be most likely to implement using an inline CSS?
a.
adding a drop-down menu that will appear on all of the pages of the Web site
b.
creating a separate style that will be used when users print any of the pages of the Web site
c.
changing the font style and size for a single paragraph on the Web site’s home page
d.
adding a pop-up feature to multiple images that appear on a single page of the Web site
Critical Thinking Questions
Case 7-2
Ben is using a Cascading Style Sheet to define a menu bar that will appear on his Web site. Among
other things, he needs to define the padding that will be used for the text on the menu.
3. Ben wants to specify the padding as a multiple of the current font size. For example, he wants one of
the padding values to be 0.5 times the current font size. Which of the following units should he use?
a.
em
b.
mm
c.
px
d.
ex
4. Ben wants to take advantage of the shorthand property to shorten the code that specifies the padding.
Which of the following property statements specifies a top and bottom padding of 0.1 cm and a left
and right padding of 0.5 cm?
a.
padding: 0.1cm 0.1cm 0.5cm 0.5cm;
b.
padding: 0.1cm 0.5cm 0.1cm;
c.
padding: 0.5cm 0.1cm;
d.
padding: 0.5cm 0.1cm 0.5cm;