Name: Class: Date:

Unit D Laying Out Elements with CSS

Solution Manual for HTML5 and CSS3 Illustrated Complete 2nd

Edition Vodnik 1305394046 9781305394049
Full download link at:
Solution manual: https://testbankpack.com/p/solution-manual-for-html5-and-css3-
illustrated-complete-2nd-edition-vodnik-1305394054-9781305394056/
Test bank: https://testbankpack.com/p/test-bank-for-html5-and-css3-illustrated-
complete-2nd-edition-vodnik-1305394046-9781305394049/
1. Creating and modifying page layouts in CSS involves specifying size and position information for web page elements.
a. True
b. False
ANSWER: True
POINTS: 1
REFERENCES: 94

2. When you want to set a common value for all four sides of an element, you can use specific properties with multiple
values.
a. True
b. False
ANSWER: False
POINTS: 1
REFERENCES: 86

3. User agents render HTML documents from bottom to top.

a. True
b. False
ANSWER: False
POINTS: 1
REFERENCES: 96

4. Pixels are absolute units, which means that they represent a specific length or height that doesn't change.
a. True
b. False
ANSWER: True
POINTS: 1
REFERENCES: 84

5. You can determine top and left positioning values by calculating the amount of space you need to move an element, or
by simple trial and error.
a. True
b. False
ANSWER: True
POINTS: 1
Cengage Learning Testing, Powered by Cognero Page 1
Name: Class: Date:

Unit D Laying Out Elements with CSS

REFERENCES: 96

6. The location of an absolutely positioned element is calculated based on the closest ancestor element that has a position
applied to it.
a. True
b. False
ANSWER: True
POINTS: 1
REFERENCES: 94

7. A positioned element cannot be moved to positions occupied by other elements.

a. True
b. False
ANSWER: False
POINTS: 1
REFERENCES: 98

8. An element with a smaller z-index value is displayed on top of an element with a larger value.
a. True
b. False
ANSWER: False
POINTS: 1
REFERENCES: 98

9. You can apply a z-index value only to an element for which you’ve declared a value for the position property.
a. True
b. False
ANSWER: True
POINTS: 1
REFERENCES: 98

10. You can use the position property to create multicolumn layouts that look and behave just like those created with
the clear property.
a. True
b. False
ANSWER: False
POINTS: 1
REFERENCES: 92

11. The padding, border, and margin properties all create space around the contents of a web page. Of the three properties,
margin, is the only one that can be seen in a web browser. _________________________
ANSWER: False - border
POINTS: 1
REFERENCES: 84
Cengage Learning Testing, Powered by Cognero Page 2
Name: Class: Date:

Unit D Laying Out Elements with CSS

12. Margin is the space inside a border between the border and the element content. _________________________
ANSWER: False - Padding
POINTS: 1
REFERENCES: 84

13. A margin shorthand property can have up to four values. _________________________

ANSWER: True
POINTS: 1
REFERENCES: 89

14. Some of the most widely used layouts in print media involve columns of text and graphics running parallel to each
other down the page. You can use the border and clear properties to create a basic version of this arrangement.
_________________________
ANSWER: False - float
POINTS: 1
REFERENCES: 92

15. In the CSS box model, the margin is always opaque. _________________________
ANSWER: False - transparent
POINTS: 1
REFERENCES: 85

16. A positioned element is placed in a new layer, which is a new level displayed on top of the basic flow of elements on
the web page. _________________________
ANSWER: True
POINTS: 1
REFERENCES: 98

17. You can control the stacking order of positioned elements by assigning values for the x-index property to each
element. _________________________
ANSWER: False - z-index
POINTS: 1
REFERENCES: 98

18. A simple technique for ensuring consistency of the visual design in different window sizes is to specify a fixed width
for the content of a web page, creating what’s commonly known as a static layout. _________________________
ANSWER: True
POINTS: 1
REFERENCES: 99

19. You can use filler text, also called fake text, to simulate content, which allows you to work with a document with a lot
of content even if it is not the final content. _________________________
ANSWER: False - lorem ipsum
POINTS: 1

Cengage Learning Testing, Powered by Cognero Page 3

Name: Class: Date:

Unit D Laying Out Elements with CSS

REFERENCES: 94

20. A fluid layout uses the min-width and max-width properties to constrain the size of the content.
_________________________
ANSWER: True
POINTS: 1
REFERENCES: 99

21. CSS represents the characteristics of every web page element using the ____ model, which treats each element as a
rectangular box having several global properties.
a. box b. rectangle
c. Element d. CSS
ANSWER: a
POINTS: 1
REFERENCES: 84

22. A CSS unit of measure equal to approximately 1/96 of an inch is a(n) ________ .
a. em b. px
c. % d. rem
ANSWER: b
POINTS: 1
REFERENCES: 85

23. The ____ properties all create space around the contents of a web page element.
a. padding b. border
c. margin d. All of the above.
ANSWER: d
POINTS: 1
REFERENCES: 84

24. ____ is the space outside the border between the border and adjacent or parent elements.
a. Margin b. Padding
c. Border d. Framing
ANSWER: a
POINTS: 1
REFERENCES: 84

25. The size of the ____, border, and margin all increase the amount of space on a web page that an element occupies or
influences.
a. picture b. frame
c. style d. padding
ANSWER: d
POINTS: 1
REFERENCES: 84
Cengage Learning Testing, Powered by Cognero Page 4
Name: Class: Date:

Unit D Laying Out Elements with CSS

26. The size of the padding, border, and margin are generally not included in the calculated ____ of an element.
a. width b. height
c. Either A or B. d. Neither A nor B.
ANSWER: c
POINTS: 1
REFERENCES: 84

27. The box model supports a separate property for each side for ____, such as padding-top or margin-left.
a. padding b. margin
c. Both A and B. d. Neither A nor B.
ANSWER: c
POINTS: 1
REFERENCES: 84

28. If you provide four values for the margin or padding property, browsers apply the first value to the ____.
a. top b. right
c. bottom d. left
ANSWER: a
POINTS: 1
REFERENCES: 88

29. For a margin-value pair with three values, the first value applies to the top, the second to ____.
a. the left b. the right
c. Both A and B. d. Neither A nor B.
ANSWER: c
POINTS: 1
REFERENCES: 88

30. When working with box model shorthand properties, a border with three values will have values that apply to width,
style, and ____.
a. resolution b. height
c. margin d. color
ANSWER: d
POINTS: 1
REFERENCES: 84

31. A widely used layout involves columns of text and graphics running parallel to each other down the page. You can
create a basic version of this arrangement, known as a ____ layout.
a. horizontal b. multicolumn
c. parallel d. vertical
ANSWER: b
POINTS: 1
REFERENCES: 92

Cengage Learning Testing, Powered by Cognero Page 5

Name: Class: Date:

Unit D Laying Out Elements with CSS

32. In addition to two-column layouts, ____ layouts including three columns are common on the web.
a. horizontal b. multicolumn
c. parallel d. vertical
ANSWER: b
POINTS: 1
REFERENCES: 92

33. CSS lets you specify the exact position of an element on a web page using the ____ property.
a. ruler b. grid
c. position d. location
ANSWER: c
POINTS: 1
REFERENCES: 94

34. You can make adjustments to the default position of an element while preserving the space allotted to the element in
the default page flow. This technique is known as ____ positioning.
a. standard b. flexible
c. relative d. absolute
ANSWER: c
POINTS: 1
REFERENCES: 96

35. The CSS relative positioning property called ____ moves the element relative to its original position but preserves the
space reserved for the element in its original position.
a. position b. top
c. left d. location
ANSWER: a
POINTS: 1
REFERENCES: 96

36. The CSS relative positioning property called ____ moves the element the specified distance from the top edge of the
closest ancestor element that is also positioned; the default value, 0, leaves the element in its original vertical position.
a. edge b. top
c. upper d. bottom
ANSWER: b
POINTS: 1
REFERENCES: 96

37. The CSS relative positioning property called ____ moves the element the specified distance from the left edge of the
closest ancestor element that is also positioned; the default value, 0, leaves the element in its original horizontal position.
a. left b. right
c. edge d. top
ANSWER: a
POINTS: 1

Cengage Learning Testing, Powered by Cognero Page 6

Name: Class: Date:

Unit D Laying Out Elements with CSS

REFERENCES: 96

38. The CSS property of left can have a value in em, pixels, or percent of the ____.
a. width of the browser element b. height of the browser element
c. width of the child element d. height of the child element
ANSWER: a
POINTS: 1
REFERENCES: 95, 96

39. The CSS property of top can have a value in em, pixels,or percent of the ____.
a. width of the browser element b. height of the browser element
c. width of the child element d. height of the child element
ANSWER: b
POINTS: 1
REFERENCES: 95, 96

40. You can help all user agents understand the content of your pages and present it appropriately by using semantic
elements to indicate the content of different columns; for instance, ____ for main page content.
a. article b. nav
c. sidebar d. quote
ANSWER: a
POINTS: 1
REFERENCES: 96

41. When the CSS property of position is set to ____ it moves the element relative to its original position and allows
other elements to flow into the space that the absolutely positioned element would have otherwise occupied.
a. relative b. absolute
c. left d. right
ANSWER: b
POINTS: 1
REFERENCES: 100

42. The CSS property of top, bottom, left, or right moves the element the specified distance from the respective
edge of the closest ____ element that is also positioned.
a. base b. ancestor
c. parent d. relative
ANSWER: b
POINTS: 1
REFERENCES: 100

43. An element with _____ positioning is removed from the normal flow and keeps its position even when the user
scrolls.
a. fixed b. relative
c. absolute d. static
Cengage Learning Testing, Powered by Cognero Page 7
Name: Class: Date:

Unit D Laying Out Elements with CSS

ANSWER: a
POINTS: 1
REFERENCES: 94

44. By creating a fluid layout, which is also known as a(n) ____ layout, you give your Web page the flexibility to adjust
its width based on the width of a user’s browser window while still maintaining your intended layout.
a. liquid b. water
c. unstructured d. flexible
ANSWER: a
POINTS: 1
REFERENCES: 99

45. The specfication "_____" is a relative unit that represents the current font size.
a. m b. em
c. mem d. me
ANSWER: b
POINTS: 1
REFERENCES: 85

46. Referring to the figure above, letter c indicates element ____.

a. padding b. border
c. margin d. content
ANSWER: c
POINTS: 1

Cengage Learning Testing, Powered by Cognero Page 8

Name: Class: Date:

Unit D Laying Out Elements with CSS

REFERENCES: 85

47. Referring to the figure above, letter d indicates element ____.

a. padding b. border
c. margin d. content
ANSWER: b
POINTS: 1
REFERENCES: 85

48. Referring to the figure above, letter e indicates element ____.

a. padding b. border
c. margin d. content
ANSWER: a
POINTS: 1
REFERENCES: 85

49. Referring to the figure above, the minimum width for the element is ____.
a. 44em b. 60em
c. 0 d. You cannot tell from the figure.
ANSWER: a
POINTS: 1
REFERENCES: 84

50. Referring to the figure above, the maximum width for the element is ____.
a. 44em b. 60em
c. 0 d. You cannot tell from the figure.
ANSWER: b
POINTS: 1
REFERENCES: 84

Cengage Learning Testing, Powered by Cognero Page 9

Name: Class: Date:

Unit D Laying Out Elements with CSS

51. Referring to the figure above, to achieve the page flow shown on the left, the elements use the default arrangement
known as ______.
a. static flow b. fluid flow
c. normal flow d. default flow
ANSWER: c
POINTS: 1
REFERENCES: 90, 91

52. Referring to the figure above, to achieve the page flow shown on the right, you would use _____ .
a. float: left b. float: right
c. float: clear d. float: none
ANSWER: a
POINTS: 1
REFERENCES: 91

A.

B.

Cengage Learning Testing, Powered by Cognero Page 10

Name: Class: Date:

Unit D Laying Out Elements with CSS

53. Referring to the figure above, the fact that the Web page width can vary means that this is an example of a ____
layout.
a. minimum b. maximum
c. relative d. fluid
ANSWER: d
POINTS: 1
REFERENCES: 99

54. Figure A. shows the Web page at its minimum width which was set using the ____ property.
a. narrow b. min-width
c. max-width d. relative-width
ANSWER: b
POINTS: 1
REFERENCES: 84

55. Figure B. shows the Web page at its maximum width which was set using the ____ property.
a. wide b. max-width
c. min-width d. absolute-width
ANSWER: b
POINTS: 1
REFERENCES: 84

Case-Based Critical Thinking Question

Kamilla is creating a pet adoption website, and is currently learning about her options using the position property.

56. Kamilla discovers that although there are several options for the position property, ____ is not one of them.
a. absolute b. fixed
c. relative d. float
ANSWER: d
POINTS: 1
Cengage Learning Testing, Powered by Cognero Page 11
Name: Class: Date:

Unit D Laying Out Elements with CSS

REFERENCES: 92
TOPICS: Critical Thinking

57. If Kamilla wants an element to remain in the same location in a browser window, even as the user scrolls through the
Web page, she would use the ____ position property.
a. absolute b. fixed
c. relative d. float
ANSWER: b
POINTS: 1
REFERENCES: 94
TOPICS: Critical Thinking

58. If Kamilla wants an element positioned relative to another element on the page, she would choose the ____ position
property.
a. absolute b. fixed
c. Both A and B. d. Neither A nor B.
ANSWER: a
POINTS: 1
REFERENCES: 94
TOPICS: Critical Thinking

Case-Based Critical Thinking Question

Tyler has been helping his friend Wes learn the website design business.
59. Wes is concerned that the article of the history of his business will extend beyond its container. Tyler tells him about
_____ , which Wes can use to give the appearance that the article fits in its container.
a. display: all b. overflow: auto
c. clear: bottom d. height: auto
ANSWER: b
POINTS: 1
REFERENCES: 93
TOPICS: Critical Thinking

60. Wes wants the header element of his web page to stay at the top of the page at all times, even when users scroll the
page. In this case, Tyler advises him to use ____ positioning.
a. absolute b. fixed
c. fluid d. relative
ANSWER: b
POINTS: 1
REFERENCES: 94,95
TOPICS: Critical Thinking

Cengage Learning Testing, Powered by Cognero Page 12

Name: Class: Date:

Unit D Laying Out Elements with CSS

61. Referring to the figure above, the ____ with the highest z-index value is stacked on top of other positioned elements
ANSWER: element
rectangle
object
POINTS: 1
REFERENCES: 99

62. A logo is often placed on a page using _______________ positioning.

ANSWER: absolute
POINTS: 1
REFERENCES: 101

63. When the bottom margin of one element is adjacent to the top margin of another element, the margins combine, or
________________, into a single margin equal to the greater of the two values.
ANSWER: collapse
POINTS: 1
REFERENCES: 84

64. Because user agents render HTML documents from top to bottom, it’s relatively straightforward to create layouts that
stack styled elements ________________.
ANSWER: vertically
POINTS: 1
REFERENCES: 90, 97

65. You can control the flow of web page elements more precisely with the CSS ________ property, which prevents
floated elements from being displayed to the left, right, or on either side of another element.
ANSWER: clear
POINTS: 1
REFERENCES: 92

66. ________________ positioning takes an element out of the page flow entirely and allows other elements to flow into
the space it would have occupied.
ANSWER: Absolute
POINTS: 1
REFERENCES: 100

Cengage Learning Testing, Powered by Cognero Page 13

Name: Class: Date:

Unit D Laying Out Elements with CSS

67. While it requires careful planning to ensure that a positioned element doesn’t unintentionally obscure the view of
another element, the ability to overlap, or ________________, elements introduces additional possibilities for creative
layouts.
ANSWER: stack
POINTS: 1
REFERENCES: 98

68. The size of the padding, border, and margin all increase the amount of space on a web page that an element occupies
or influences. However, the dimensions of these properties are generally not included in the calculated width or height of
an element. Please explain how you calculate box size.
ANSWER: By default, when you specify dimensions for an element using the width and height properties, the
values you specify apply only to the element content. Any values you specify for padding, border, or
margin are added to the height or width value you specify. Especially when you’re fitting an element
into a limited amount of space, you need to subtract the additional area occupied by padding, border, and
margin to arrive at the appropriate width or height value. For instance, when the width of an element
must fit into a limited space, you have to subtract both the left and right values for padding, border, and
margin to arrive at the appropriate width value for your style sheet. Similarly, to calculate a height value,
you need to subtract all three values for the top and bottom of the element.
POINTS: 1
REFERENCES: 84
TOPICS: Critical Thinking

69. What is the difference between a stack and a layer? How can you use the z-index property to determine stacking
order?
ANSWER: The ability to overlap, or stack, elements introduces additional possibilities for creative layouts.

A positioned element is placed in a new layer, which is a new level displayed on top of the basic flow of
elements on the Web page.

You can control the stacking order of positioned elements by assigning values for the z-index property to
each element. Numbers can be positive or negative, and an element with a larger z-index value is
displayed on top of an element with a smaller value.
POINTS: 1
REFERENCES: 98
TOPICS: Critical Thinking

70. In addition to relative and absolute, the position property supports a third value: fixed. How is fixed positioning
different than absolute positioning? How does an element with fixed positioning appear in a browser window?
ANSWER: An element with fixed positioning behaves just like an element with absolute positioning except that it is
displayed at the top of the stacking order and it is positioned relative to the browser window rather than
to a web page element.
As a result, fixed positioning causes an element to remain in the same location in a browser window as a
user scrolls through the web page. This styling can be useful for information or tools that users may need
at any point on a long web page.
POINTS: 1
REFERENCES: 94
TOPICS: Critical Thinking
Cengage Learning Testing, Powered by Cognero Page 14
Name: Class: Date:

Unit D Laying Out Elements with CSS

Match each term with the appropriate definition.

a. normal flow
b. relative positioning
c. absolute positioning
d. stack
e. layer
REFERENCES: 96
98
100

71. Moves the element relative to its original position and allows other elements to flow into the space that it would have
otherwise occupied
ANSWER: c
POINTS: 1

72. Overlap elements

ANSWER: d
POINTS: 1

73. The default arrangment of web page elements

ANSWER: a
POINTS: 1

74. New level displayed on top of the basic flow of elements on the Web page
ANSWER: e
POINTS: 1

75. Moves the element relative to its original position but preserves the space reserved for the element in its original
position
ANSWER: b
POINTS: 1

Cengage Learning Testing, Powered by Cognero Page 15