New Perspectives HTML5 and CSS3 Comprehensive 7th Edition Carey Test Bank 1

Name: Class: Date:
Tutorial 04: Graphic Design with CSS
Solution Manual for New Perspectives HTML5 and CSS3

Comprehensive 7th Edition Carey 1305503937 9781305503939
Full download link at:
Solution manual: https://testbankpack.com/p/solution-manual-for-new-perspectives-html5-and-css3-
comprehensive-7th-edition-carey-1305503937-9781305503939/
Test bank: https://testbankpack.com/p/test-bank-for-new-perspectives-html5-and-css3-
comprehensive-7th-edition-carey-1305503937-9781305503939/
True / False
1. Tiling is when a browser loads a background image and then repeats the image in both the vertical and
horizontal directions until the entire background is filled.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
REFERENCES: HTML 265
QUESTION TYPE: True / False
HAS VARIABLES: False
LEARNING OBJECTIVES: 04.02 - Add a background image
NATIONAL STANDARDS: United States - BUSPROG: Technology
TOPICS: Exploring Background Styles
KEYWORDS: Bloom’s: Remember
DATE CREATED: 10/12/2015 2:06 AM
DATE MODIFIED: 10/12/2015 2:15 AM
2. Even if the background images are hidden, the tiling process continues behind the page body.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Moderate
KEYWORDS: Bloom’s: Understand
Copyright Cengage Learning. Powered by Cognero. Page 1

Name: Class: Date:

3. A background image is attached to its element so that as the element content is scrolled through, the
background image remains still.
a. True
b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
4. If a single value is specified in the background-position property, the browser applies that value to both the
horizontal and vertical position.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
5.
A background image can be placed using the keywords left, center, and right for the vertical position and top,
center, and bottom for the horizontal position.
a. True
b. False
ANSWER: False
POINTS: 1
Name: Class: Date:

6. The background-position property is only useful for non-tiled images because a tiled image fills the
background and it usually doesn't matter where the tiling starts.
a. True
b. False
ANSWER: True
POINTS: 1
7. By default, an element’s background is defined to extend only through the padding space and not to include
the border space.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

8. If a background extends through the border space by default, all coordinates for the image position are
measured from the bottom-left corner.
a. True
b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
9. The size of a background image is smaller than the size stored in the image file.
a. True
b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
10. Backgrounds are added in the reverse order in which they’re listed in a style rule.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

11. The radii of individual corners are equal to the radii of hypothetical circles placed at the corners of a box
with the arcs of the circles defining the rounded circles.
a. True
b. False
ANSWER: True
POINTS: 1
LEARNING OBJECTIVES: 04.04 - Create rounded borders
TOPICS: Working with Borders
12. Multiple shadows can be added to text by including each shadow definition in a comma-separated list.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.06 - Create a text shadow
TOPICS: Creating Drop Shadows
13. Box shadows can only be placed outside an element.

a. True

Name: Class: Date:

b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.07 - Create a box shadow
14. By default, a box shadow has the same size and dimensions as its page object offset in the horizontal and
vertical direction.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
15. The default direction for a linear color gradient is horizontal, starting from the left of an object and moving
to the bottom.
a. True
b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.08 - Create linear and radial gradients

Name: Class: Date:

TOPICS: Applying a Color Gradient
16. When parameters of the radial-gradient function are omitted, they take their default values.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
17. The only requirement for a repeating gradient is that a stopping position is required for the first color in the
list that is less than the size of the object background.
a. True
b. False
ANSWER: False
POINTS: 1
18. In the opacity property, if the value is 0, it means an object is completely opaque.
a. True
b. False

Name: Class: Date:

ANSWER: False
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.09 - Set the opacity of an element
TOPICS: Creating Semi-Transparent Objects
19. A smaller perspective value causes a pair of railroad tracks to converge over an apparently shorter distance,
while a larger perspective value causes the tracks to appear to go farther before converging.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.10 - Apply a 2D and 3D transformation
TOPICS: Transforming Page Objects
20. Client-side image maps are easier to create but rely on a connection to the server in order to run.
a. True
b. False
ANSWER: False
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.12 - Create an image map
TOPICS: Working with Image Maps
Name: Class: Date:

21. There is no limit to the number of hotspots one can add to an image map.
a. True
b. False
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
Modified True / False
22. In the background-attachment property, the scroll type creates a background that stays in place even as the
element content is scrolled horizontally or vertically.
ANSWER: False - fixed
POINTS: 1
DIFFICULTY: Easy
QUESTION TYPE: Modified True / False
23. In the background-attachment property, the fixed type sets the background to scroll with element content.
ANSWER: False - scroll
POINTS: 1
DIFFICULTY: Easy
Name: Class: Date:

24. By default, browsers place a background image in an element’s bottom-left corner.

ANSWER: False - top-left
POINTS: 1
DIFFICULTY: Easy
25. The sizing keyword cover tells the browser to automatically set the width or height value based on the
dimensions of the original image.
ANSWER: False - auto
POINTS: 1
DIFFICULTY: Easy
26. The sizing keyword contain scales an image so that it is completely contained within an element, even if that
means that not all of the element background is covered.
ANSWER: True
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

27. The sizing keyword auto tells the browser to resize an image to cover all of the element background while
still retaining the image proportions.
ANSWER: False - cover
POINTS: 1
DIFFICULTY: Easy
28. Individual background properties can contain multiple options placed in a comma-separated list.
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
29. Elliptical corners can be created by specifying the ratio of the horizontal radius to the vertical radius using
the border-radius style.
ANSWER: True

Name: Class: Date:

POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.03 - Add a border to an element
30. Slices of different widths or heights can be created by entering the size values in a comma-separated list.
ANSWER: False - space-separated
POINTS: 1
31. Shadows can be added to any block element in a web page by using the text-shadow property.
ANSWER: False - box-shadow
POINTS: 1
DIFFICULTY: Easy
32. A radial gradient is a color gradient in which the background color transitions from a starting color to an
ending color along a straight line.
Name: Class: Date:

ANSWER: False - linear
POINTS: 1
DIFFICULTY: Easy
33. A linear gradient is a color gradient that starts from a central point and proceeds outward in a series of
concentric circles.
ANSWER: False - radial
POINTS: 1
DIFFICULTY: Easy
34. In the radial-gradient function, the default is to place the gradient within the center of a background.
ANSWER: True
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

35. In the opacity property, if the value is 1, the object is completely transparent.
ANSWER: False - opaque
POINTS: 1
DIFFICULTY: Easy
36. The perspective function should be used when only one object needs to be transformed in a 3D space.
ANSWER: True
POINTS: 1
DIFFICULTY: Easy
Multiple Choice
37. The _____ element is used to contain an image file and can also be used to mark any page content that
should stand apart from the main content of an article.
a. border
b. article
c. image
d. figure
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
QUESTION TYPE: Multiple Choice

Name: Class: Date:

LEARNING OBJECTIVES: 04.01 - Create a figure box
TOPICS: Creating Figure Boxes
38. Identify a true statement about the figcaption element.

a. It is the content that will appear within a figure box.
b. It is the description text that accompanies a figure.
c. It is placed either directly before or directly after a figure box content.
d. It is used to mark any page content to make it stand apart from the main content of an article.
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.01 - Create a figure box
TOPICS: Creating Figure Boxes
39. Which of the following styles is used to specify the type of tiling to be applied to a background image, or
even turn off tiling?
a. background-repeat: type;
b. background-image: url(url);
c. background-attachment: type;
d. background-clip: type;
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
TOPICS: Exploring the Background Styles
Name: Class: Date:

40. Identify the default type for the background-repeat style.

a. no-repeat
b. repeat
c. repeat-x
d. repeat-y
ANSWER: b
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:
41. In the given image, which of the following types of background property does figure 2 denote?
a. no-repeat
b. repeat
c. repeat-x
d. repeat-y
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
PREFACE NAME: Section Break 1

Name: Class: Date:

KEYWORDS: Bloom’s: Apply
a. no-repeat
b. repeat
c. repeat-x
d. repeat-y
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
a. space
b. repeat
c. repeat-x
d. round
ANSWER: a
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

44. Identify the default type of the background-attachment property.
a. space
b. scroll
c. local
d. fixed
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
45. Which of the following background-attachment properties is similar to scroll, but is used for elements, such
as scroll boxes, to allow the element background to scroll along with the content within a box?
a. space
b. round
c. local
d. fixed
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
46. Identify the property that can be used to change the definition of an element’s background.
a. background-repeat: type;
b. background-image: url(url);
c. background-attachment: type;

Name: Class: Date:

d. background-clip: type;
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
47. Identify the option that specifies whether an image scrolls with the content or is fixed in the following
background property:
background:
color url(url) position / size repeat attachment
origin clip;
a. position
b. origin
c. clip
d. attachment
ANSWER: d
POINTS: 1
48. Identify the option that defines how positions are measured on the background in the following background
property:
background: color url(url) position / size repeat attachment
origin clip;
a. size
b. origin

Name: Class: Date:

c. clip
d. attachment
ANSWER: b
POINTS: 1
49. Which of the following properties is used to define the thickness of a specific border?
a. border-width: left;
b. border-side-width: width;
c. border-width: width;
d. border-width-style: thick;
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
50. To round off any of the four corners of a border, the _____ property should be applied.
a. border-width
b. border-radius
c. border-style
d. border-image
ANSWER: b
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

LEARNING OBJECTIVES: 04.04 - Create rounded borders
51. Identify the style that can be used to create elongated or elliptical corners.
a. border-radius: horizontal/vertical;
b. border-corner: style;
c. border-corner: type;
d. border-corner-radius: radius;
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
52. Identify the property that is used to apply a border image.

a. border-image: horizontal/vertical;
b. border-image: style;
c. border-image-radius: radius;
d. border-image: url(url) slice repeat;
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.05 - Create a graphic border

Name: Class: Date:

53. If the slices of a graphic image do not fill the sides with an integer number of tiles, identify the repeat option
that can be used with the border-image property to rescale the slices until they do.
a. round
b. space
c. stretch
d. repeat
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
54. Identify the repeat option in the border-image property that distributes extra space around the tiles when the
slices don’t fill the sides with an integer number of tiles.
a. round
b. space
c. stretch
d. repeat
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
Name: Class: Date:
55. Identify the use of the inset keyword used in the box-shadow property.
a. It is used to mention the shadow color.
b. It is used to measure the distances of the shadow from the text in horizontal and vertical directions.
c. It is used to define the amount by which the shadow is stretched.
d. It is used to create an interior shadow.
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
56. To change the shadow size, the _____ parameter must be added to the box-shadow property, specifying the
size of the shadow relative to the size of the object.
a. round
b. space
c. stretch
d. spread
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
57. The _____ size parameter of the radial-gradient function makes a gradient extend to the nearest background
corner.
a. corner-side
b. closest-corner
Name: Class: Date:

c. side-corner
d. farthest-corner
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
58. Which of the following is the default shape value for the radial-gradient function?
a. Round
b. Square
c. Ellipse
d. Circle
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
59. Which of the following is the default size keyword in the radial-gradient function?
a. farthest-corner
b. farthest-side
c. closest-corner
d. closest-side
ANSWER: a
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

60. Identify a CSS3 2D transformation function that resizes an object by a factor of x horizontally.
a. rotate(angleX)
b. skewX(angleX)
c. scaleX(x)
d. translateX(offX)
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
61. Identify the syntax of the transform property.

a. transform: effect(params);
b. transform: horizontal vertical;
c. transform: radius;
d. transform: size shape at position;
ANSWER: a
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

62. Identify a CSS3 2D transformation function that resizes an object by a factor of x horizontally.
a. rotate(angleY)
b. skewY(angleY)
c. scaleY(y)
d. translateY(offY)
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
63. Which of the following is true of transformations in three dimensions?

a. Positive values along the axes are to the right, down, and away from a reader.
b. Positive values along the axes are to the left, up, and away from a reader.
c. Negative values along the axes are to the right, down, and toward a reader.
d. Negative values along the axes are to the left, up, and away from a reader.
ANSWER: d
POINTS: 1

Name: Class: Date:

64. Identify the CSS3 3D transformation function that shifts an object offX pixels horizontally, offY pixels
vertically, and offZ pixels along the z-axis.
a. translate3d(offX, offY, offZ)
b. perspective(p)
c. rotate3d(offX, offY, offZ, angle)
d. scale3d(offX, offY, offZ)
ANSWER: a
POINTS: 1
65. Identify a true statement about the perspective property.

a. A larger perspective value causes railroad tracks to converge over an apparently shorter distance.
b. The perspective property can be used when there are several transformed objects within a container
that all need to appear within the same 3D space within a common perspective.
c. A smaller perspective value causes the railroad tracks to appear to go farther before converging.
d. The perspective property uses a negative value that measures the strength of the perspective effect
with higher values resulting in more extreme distortion.
ANSWER: b
POINTS: 1
REFERENCES: HTML 317-HTML 318
66. A final way to alter an object is through a Cascading Style Sheets (CSS) _____.
a. filter
b. box model
Name: Class: Date:

c. border property
d. visual design style
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
LEARNING OBJECTIVES: 04.11 - Apply a CSS filter
TOPICS: Exploring CSS Filters
67. Which of the following angles used in the filter function hue-rotate (angle) displays the complimentary
colors?
a. 0deg
b. 180deg
c. 90deg
d. 360deg
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
68. Which of the following values decreases the brightness in the filter function brightness?
a. Values less than 0
b. Values from 2 to 5
c. Values from 0 to 1
d. Values greater than 5
ANSWER: c
POINTS: 1

Name: Class: Date:

DIFFICULTY: Easy
69. Which of the following Cascading Style Sheets (CSS) 3 filters applies transparency to an image?
a. blur
b. invert
c. grayscale
d. opacity
ANSWER: d
POINTS: 1
DIFFICULTY: Easy
70. Filter functions can be combined in a _____ to create new effects.

a. comma-separated list
b. semicolon-separated list
c. colon-separated list
d. space-separated list
ANSWER: d
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

71. In a client-side image map, _____ are defined regions within an image that can be linked to different URLs.
a. borders
b. figure boxes
c. hotspots
d. drop shadows
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
72. Each hotspot within the map element is defined using the _____ element.
a. header
b. article
c. space
d. area
ANSWER: d
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

73. Which of the following shape values represents the remaining area of an inline image not covered by any
hotspots?
a. default
b. circle
c. rect
d. poly
ANSWER: a
POINTS: 1
DIFFICULTY: Easy
74. Identify the coordinate attribute for the rectangular hotspots of an image.
a. coords=“x1,y1,x2,y2,…”
b. coords=“0,0,width,height”
c. coords=“left,top,right,bottom”
d. coords=“x,y,radius”
ANSWER: c
POINTS: 1
DIFFICULTY: Easy
75. Which of the following coordinate values is used to define polygonal hotspots for an image?

Name: Class: Date:

ANSWER: a
POINTS: 1
DIFFICULTY: Easy
76. Which of the following defines the default hotspot for an image?
ANSWER: b
POINTS: 1
DIFFICULTY: Easy
Sam is trying to decide the best way to design the background of his web page. He would like to add background images
and background styles to his design. He needs to understand how browsers load a background image and learn about
background style properties.
77. Sam wants the browser to load a background image and repeat the image in both the vertical and horizontal directions
until the background is filled. This process is known as _____.
a. painting
b. tiling
c. papering
d. drawing
ANSWER: b
Name: Class: Date:

POINTS: 1
PREFACE NAME: Case Based 4-1
78. Sam wants to change the position of an image on his web page. He wants to place the background image 30 pixels to
the right of an element’s left edge and 30 pixels down from the top edge. Identify the correct style that Sam should use.
a. background-position: 30px;
b. background-position: 30px vertical;
c. background-position: 30px 30px;
d. background-position: t_edge, 30px;
ANSWER: a
POINTS: 1
79. Sam needs to know how to tell the browsers to scale the image in order to cover all of the background while still
retaining the proportions of the image, even if that means cropping the image. The keyword Sam should use in the
background-size: property is _____.
a. contain
b. content
c. cover
d. auto
ANSWER: c
POINTS: 1
Name: Class: Date:

Scott works for an online retailer and has to format the border around each element on their web page. He has to set the
border design and the border color for each element. He needs to understand how the appearance and color of the border
can be defined.
80. Scott wants to use the color gray for the top and left borders and black for the right and bottom borders for an element.
Which of the following should he use to define this?
a. border-color: gray black gray black;
b. border-color: gray, black, gray, black;
c. border-color: gray black black gray;
d. border-color: gray, black, black, gray;
ANSWER: c
POINTS: 1
81. Scott wishes to modify the combination of the borders used on an element. He wants to use a double line for the
top/bottom borders and a single solid line for the left/right borders. Which of the following border styles should he use?
a. border-style: double solid;
b. border-style: double double solid solid;
c. border-style: solid double;
d. border-style: double solid solid double;
ANSWER: a
POINTS: 1
Name: Class: Date:

Completion
82. _________ is similar to the process of filling up a floor or other surface with tiles.
ANSWER: Tiling
POINTS: 1
DIFFICULTY: Easy
QUESTION TYPE: Completion
83. _________ are translucent graphics displayed behind the content of a web page with a message that the
content material is copyrighted or in draft form or some other message directed to the reader.
ANSWER: Watermarks
POINTS: 1
DIFFICULTY: Easy
84. In the background-clip property, the _________ type is used to extend the background only through the
element content.
Name: Class: Date:

ANSWER: content-box
POINTS: 1
padding space.
ANSWER: padding-box
POINTS: 1
86. A _________ is a border that is based on a graphic image.

ANSWER: border image
POINTS: 1

Name: Class: Date:

border space.
ANSWER: border-box
POINTS: 1
88. A visual impact can be given to the text on a page by using Cascading Style Sheets (CSS) to add a shadow
using the _________ property.
ANSWER: text-shadow
POINTS: 1
DIFFICULTY: Easy
89. Apart from drop shadows, another way to modify the background color is through a _________ in which
one color gradually blends into another color or fades away if transparent colors are used.
ANSWER: color gradient
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

90. A _________ is a color gradient in which the background color transitions from a starting color to an ending
color along a straight line.
ANSWER: linear gradient
POINTS: 1
DIFFICULTY: Easy
91. A _________ represents the point at which a specified color ends and the transition to the next color begins.
ANSWER: color stop
POINTS: 1
DIFFICULTY: Easy
92. A _________ is a color gradient that starts from a central point and proceeds outward in a series of
concentric circles or ellipses.
ANSWER: radial gradient
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

93. Whole objects that are semi-transparent can be created using the _________ property.
ANSWER: opacity
POINTS: 1
DIFFICULTY: Easy
94. A _________ is a change that involves three spatial axes: an x-axis that runs horizontally across the page, a
y-axis that runs vertically, and a z-axis that comes straight out of the page toward and away from the viewer.
ANSWER: 3D transformation
POINTS: 1
DIFFICULTY: Easy
95. _________ is a measure of how rapidly objects appear to recede from a viewer in a 3D space.
ANSWER: Perspective
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

96. Perspective can be thought in terms of railroad tracks that appear to converge at a point, known as the
_________.
ANSWER: vanishing point
POINTS: 1
DIFFICULTY: Easy
97. Cascading Style Sheets (CSS) _________ adjust how a browser renders an image, a background, or a border
by modifying an object’s color, brightness, contrast, or general appearance.
ANSWER: filters
POINTS: 1
DIFFICULTY: Easy
98. Hypertext Markup Language (HTML) allows division of an image into different zones, or _________,
which can then be linked to different URLs through information provided in an image map.
ANSWER: hotspots
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

99. A _________ image map is an image map that is defined within a web page and handled entirely by a web
browser.
ANSWER: client-side
POINTS: 1
DIFFICULTY: Easy
100. A _________ image map relies on a program running the web server to create and administer the map.
ANSWER: server-side
POINTS: 1
DIFFICULTY: Easy
101. To apply an image map to an image, the _________ attribute is added to the img element.
ANSWER: usemap
POINTS: 1
DIFFICULTY: Easy

Name: Class: Date:

Matching
Identify the letters of the choices that best match the phrases or definitions.
a. Tiling b. Vertical
c. Hotspots d. Watermarks
e. Ellipse
DIFFICULTY: Easy
HTML 267
HTML 296
HTML 302
HTML 324
QUESTION TYPE: Matching
04.08 - Create linear and radial gradients
04.12 - Create an image map
Exploring Background Styles
Working with Image Maps
102. The default shape for a radial color gradient

ANSWER: e
POINTS: 1
103. Repeats the image in both vertical and horizontal directions until the entire background is filled
ANSWER: a
POINTS: 1
104. Linked to different URLs through information provided in an image map

ANSWER: c
Name: Class: Date:

POINTS: 1
105. The default direction for a linear color gradient

ANSWER: b
POINTS: 1
106. Displayed behind a content with a message that the content element is copy-righted
ANSWER: d
POINTS: 1
Essay
107. Explain how the position of a background image is set in a web page.
ANSWER:
By default, browsers place a background image in an element’s top-left corner. One can place
the background image at a different position using the following background-position
property:
background-position: horizontal vertical;
where horizontal and vertical provide the coordinates of the image within the element
background expressed using one of the CSS units of measure or as a percentage of the
element’s width and height. For example, the following style places the image 10% of the
width of the element from the left edge of the background and 20% of the element’s height
from the background’s top edge:
background-position: 10% 20%;
If a single value is specified, the browser applies that value to both the horizontal and vertical
position. Thus, the following style places the background image 30 pixels from the element’s
left edge and 30 pixels down from the top edge:
background-position: 30px;
One can also place the background image using the keywords left, center, and right for the
horizontal position and top, center, and bottom for the vertical position. The following style
places the background image in the bottom-right corner of the element:
background-position: right bottom;
Typically, the background-position property is only useful for non-tiled images because, if
the image is tiled, the tiled image fills the background and it usually doesn't matter where the
tiling starts.
POINTS: 1
QUESTION TYPE: Essay
Name: Class: Date:

108. Describe the process of setting the width and color of a border.
ANSWER:
Cascading Style Sheets (CSS) supports several style properties that are used to format
the border around each element. As with the margin and padding styles, one can
apply a style to the top, right, bottom, or left border, or to all borders at once. To
define the thickness of a specific border, use the property
border-side-width: width;
where side is either top, right, bottom, or left and width is the width of the border in
one of the CSS units of measure. For example, the following style sets the width of
the bottom border to 10 pixels:
border-bottom-width: 10px;
Border widths also can be expressed using the keywords thin, medium, or thick; the
exact application of these keywords depends on the browser. One can define the
border widths for all sides at once using the border-width property
border-width: top right bottom left;
where top, right, bottom, and left are the widths of the matching border. As with the
margin and padding properties, if one value is entered, it’s applied to all four borders;
two values set the width of the top/bottom and left/right borders, respectively; and
three values are applied to the top, left/right, and bottom borders, in that order.
Thus, the following property sets the widths of the top/bottom borders to 10 pixels
and the left/right borders to 20 pixels:
border-width: 10px 20px;
The color of each individual border is set using the property
border-side-color: color;
where side once again specifies the border side and color is a color name, color value,
or the keyword transparent to create an invisible border. The color of the four sides
can be specified using the following border-color property:
border-color: top right bottom left;
where top right bottom left specifies the side to which the color should be applied.
Thus, the following style uses gray for the top and left borders and black for the right
and bottom borders:
border-color: gray black black gray;
If no border color is specified, the border will use the text color assigned to the
element.
POINTS: 1

Name: Class: Date:

109.
How are text shadows created?
ANSWER: To give visual impact to a text on a web page, one can use Cascading Style Sheets
(CSS) to add a shadow using the following text-shadow property:
text-shadow: color offsetX offsetY blur;
where color is the shadow color, offsetX and offsetY are the distances of the shadow
from the text in the horizontal and vertical directions, and blur defines the amount by
which the shadow spreads out, creating a blurred effect. The shadow offset values are
expressed so that positive values push the shadow to the right and down while
negative values move the shadow to the left and up. The default blur value is 0,
creating a shadow with distinct hard edges; as the blur value increases, the edge of the
shadow becomes less distinct and blends more in the text background. The following
style creates a red text shadow that is 10 pixels to the right and 5 pixels down from
the text with blur of 8 pixels:
text-shadow: red 10px 5px 8px;
Multiple shadows can be added to text by including each shadow definition in the
following comma-separated list:
text-shadow: shadow1, shadow2, shadow3, …;
where shadow1, shadow2, shadow3, and so on are shadows applied to the text with
the first shadow listed displayed on top of subsequent shadows when they overlap.
The following style rule creates two shadows with the first red shadow placed 10
pixels to the left and 5 pixels up from the text and the second gray shadow placed 3
pixels to the right and 4 pixels down from the text. Both shadows have a blur of 6
pixels:
text-shadow: red -10px -5px 6px,
gray 3px 4px 6px;
POINTS: 1
DIFFICULTY: Easy

New Perspectives HTML5 and CSS3 Comprehensive 7th Edition Carey Test Bank 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

New Perspectives HTML5 and CSS3 Comprehensive 7th Edition Carey Test Bank 1

Uploaded by

Copyright:

Available Formats

Name: Class: Date:

Tutorial 04: Graphic Design with CSS

Solution Manual for New Perspectives HTML5 and CSS3

Copyright Cengage Learning. Powered by Cognero. Page 1

Tutorial 04: Graphic Design with CSS

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 3

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 4

Tutorial 04: Graphic Design with CSS

13. Box shadows can only be placed outside an element.

Copyright Cengage Learning. Powered by Cognero. Page 5

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 6

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 7

Tutorial 04: Graphic Design with CSS

Tutorial 04: Graphic Design with CSS

Modified True / False

Tutorial 04: Graphic Design with CSS

24. By default, browsers place a background image in an element’s bottom-left corner.

Copyright Cengage Learning. Powered by Cognero. Page 10

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 11

Tutorial 04: Graphic Design with CSS

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 13

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 14

Tutorial 04: Graphic Design with CSS

38. Identify a true statement about the figcaption element.

Tutorial 04: Graphic Design with CSS

40. Identify the default type for the background-repeat style.

Copyright Cengage Learning. Powered by Cognero. Page 16

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 17

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 18

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 19

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 20

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 21

Tutorial 04: Graphic Design with CSS

52. Identify the property that is used to apply a border image.

Copyright Cengage Learning. Powered by Cognero. Page 22

Tutorial 04: Graphic Design with CSS

Tutorial 04: Graphic Design with CSS

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 25

Tutorial 04: Graphic Design with CSS

61. Identify the syntax of the transform property.

Copyright Cengage Learning. Powered by Cognero. Page 26

Tutorial 04: Graphic Design with CSS

63. Which of the following is true of transformations in three dimensions?

Copyright Cengage Learning. Powered by Cognero. Page 27

Tutorial 04: Graphic Design with CSS

65. Identify a true statement about the perspective property.

Tutorial 04: Graphic Design with CSS

Copyright Cengage Learning. Powered by Cognero. Page 29

Tutorial 04: Graphic Design with CSS

70. Filter functions can be combined in a _____ to create new effects.

Copyright Cengage Learning. Powered by Cognero. Page 30