Name:
Class:
Date:
1. Creating and modifying page layouts in CSS involves specifying size and position information for web page elements.
a.
True
b.
False
True
1
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
False
1
86
3. User agents render HTML documents from bottom to top.
a.
True
b.
False
False
1
96
4. Pixels are absolute units, which means that they represent a specific length or height that doesn’t change.
a.
True
b.
False
True
1
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
True
1
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
True
1
94
Name:
Class:
Date:
7. A positioned element cannot be moved to positions occupied by other elements.
a.
True
b.
False
False
1
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
False
1
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
True
1
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
False
1
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. _________________________
False – border
1
84
12. Margin is the space inside a border between the border and the element content. _________________________
False – Padding
1
84
13. A margin shorthand property can have up to four values. _________________________
True
1
Name:
Class:
Date:
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.
_________________________
15. In the CSS box model, the margin is always opaque. _________________________
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. _________________________
17. You can control the stacking order of positioned elements by assigning values for the x-index property to each
element. _________________________
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. _________________________
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. _________________________
20. A fluid layout uses the min–width and max-width properties to constrain the size of the content.
_________________________
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.
Name:
Class:
Date:
a.
box
b.
rectangle
c.
Element
d.
CSS
1
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
b
1
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.
d
1
84
24. ____ is the space outside the border between the border and adjacent or parent elements.
a.
Margin
b.
Padding
c.
Border
d.
Framing
1
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
d
1
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.
1
84
27. The box model supports a separate property for each side for ____, such as padding-top or margin–left.
a.
padding
b.
margin
Name:
Class:
Date:
c.
Both A and B.
d.
Neither A nor B.
1
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
1
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.
1
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
d
1
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
b
1
92
32. In addition to two-column layouts, ____ layouts including three columns are common on the web.
a.
horizontal
b.
multicolumn
c.
parallel
d.
vertical
b
1
92
33. CSS lets you specify the exact position of an element on a web page using the ____ property.
a.
ruler
b.
grid
Name:
Class:
Date:
c.
position
d.
location
1
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
1
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
1
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
b
1
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
1
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
1
95, 96
Name:
Class:
Date:
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
b
1
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
1
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
b
1
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
b
1
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
1
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
Name:
Class:
Date:
45. The specfication “_____” is a relative unit that represents the current font size.
a.
m
b.
em
c.
mem
d.
me
1
46. Referring to the figure above, letter c indicates element ____.
a.
padding
b.
border
c.
margin
d.
content
1
85
47. Referring to the figure above, letter d indicates element ____.
a.
padding
b.
border
c.
margin
d.
content
b
1
99
Name:
Class:
Date:
48. Referring to the figure above, letter e indicates element ____.
a.
padding
b.
border
c.
margin
d.
content
1
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.
1
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.
b
1
84
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
Name:
Class:
Date:
c.
normal flow
d.
default flow
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
1
91
A.
B.
53. Referring to the figure above, the fact that the Web page width can vary means that this is an example of a ____
layout.
Name:
Class:
Date:
a.
minimum
b.
maximum
c.
relative
d.
fluid
d
1
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
b
1
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
b
1
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
d
1
92
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
b
1
94
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.
Name:
Class:
Date:
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
b
1
93
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
b
94,95
Critical Thinking
61. Referring to the figure above, the ____ with the highest z-index value is stacked on top of other positioned elements
object
1
99
62. A logo is often placed on a page using _______________ positioning.
1
94
Critical Thinking
Name:
Class:
Date:
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.
64. Because user agents render HTML documents from top to bottom, it’s relatively straightforward to create layouts that
stack styled elements ________________.
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.
66. ________________ positioning takes an element out of the page flow entirely and allows other elements to flow into
the space it would have occupied.
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.
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.
69. What is the difference between a stack and a layer? How can you use the z-index property to determine stacking
order?
displayed on top of an element with a smaller value.
1
98
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?
at any point on a long web page.
1
94
Critical Thinking
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
1
72. Overlap elements
1
84
Critical Thinking
Name:
Class:
Date:
73. The default arrangment of web page elements
74. New level displayed on top of the basic flow of elements on the Web page
75. Moves the element relative to its original position but preserves the space reserved for the element in its original
position