Name:
Class:
Date:
True / False
1. The :before and :after pseudo-elements enable you to insert content into web pages using style rules.
a.
True
b.
False
True
1
296
2. You can use the :before pseudo-element to add an image before an element.
a.
True
b.
False
True
1
296
3. Style rules based on the :before and :after pseudo classes use the display property to specify text or the path
and name of a file.
a.
True
b.
False
False
1
4. In the box model, generated content is not considered part of an element’s content.
a.
True
b.
False
False
1
296
5. CSS supports several pseudo-classes specifically for use with forms.
a.
True
b.
False
True
1
298
6. You can use the :visited pseudo-class to change the properties of input elements and other elements in forms.
a.
True
b.
False
False
1
299
Name:
Class:
Date:
7. You use the :focus pseudo-class to specify styles for a form field when it has the focus.
a.
True
b.
False
True
1
299
8. The :valid pseudo-class applies to form elements with user input that does not meet the rules for the field.
a.
True
b.
False
False
1
299
9. Modern browsers support gradients as backgrounds.
a.
True
b.
False
True
1
300
10. You can create triangles by applying CSS properties to div elements.
a.
True
b.
False
True
1
302
Modified True / False
11. Modernizr tests a browser to detect which properties are supported, a process known as browser detection.
_________________________
False – feature
1
304
12. Modern browsers support using the CSS transform property to apply a transform. _________________________
True
1
306
13. Browser suffixes are words or abbreviations that are added to a property name and that are specific to one or more
browsers or rendering engines. _________________________
Name:
Class:
Date:
14. A filter is a visual effect in which an area starts as a single color on one edge or corner and transitions gradually to one
or more other colors. _________________________
15. The scale keyword rotates an element a specified number of degrees. _________________________
16. The translate keyword repositions an element a specified amount from its default position.
_________________________
17. To create a transition, the shorthand transform property or one or more of the specific properties for transitions is
added to the style rule for the default state of the affected element. _________________________
18. An animation created using animation properties and the @keyframes rule is known as a keyframe animation.
_________________________
19. Within the braces for an @keyframes rule, you specify nested rules using pixels as selectors.
_________________________
20. The animation-duration property specifies the time in seconds from the start of an animation to the end of the
animation. _________________________
Name:
Class:
Date:
Multiple Choice
21. Content added using the :before and :after pseudo-elements is known as __________ content.
a.
generated
b.
gradient
c.
degraded
d.
detected
1
296
22. Which property is used with the :before and :after pseudo-elements to specify either text or the path and name
for an image file to be displayed?
a.
content
b.
image
c.
text
d.
element
1
296
23. When specifying content for the :before and :after pseudo-elements, a pair of quotes with not content creates an
empty string, which you use to __________.
a.
remove any content created in other style rules
b.
specify a space as the content
c.
specify a single quote as the content
d.
specify a pair of quotes as the content
1
297
24. Which of the following is a pseudo-class that you can use with a form?
a.
:focus
b.
:visited
c.
:target
d.
:form
1
299
25. You use the __________ pseudo-class to apply styles to elements that are checked or otherwise selected.
a.
:active
b.
:checked
c.
:required
d.
:valid
b
1
299
26. You use the __________ pseudo-class to apply styles to elements that do not have the required attribute.
a.
:focus
b.
:checked
c.
:optional
d.
:valid
Name:
Class:
Date:
27. Which keyword do you use to create a basic background gradient?
a.
linear–gradient
b.
background–gradient
c.
basic–gradient
d.
gradient
1
300
28. You specify a gradient as the value of which property?
a.
background–image
b.
content
c.
color
d.
background–color
1
300
29. Unless you specify otherwise, a linear gradient starts at the __________ of an element.
a.
top
b.
right
c.
bottom
d.
left
1
300
30. The __________ keyword prevents a gradient from repeating.
a.
no–repeat
b.
stop
c.
once
d.
one–time
1
300
31. When creating a gradient, a color name or value followed by a measurement is known as a(n) __________.
a.
color stop
b.
line
c.
starting point
d.
direction
1
300
32. Which property is important in creating a circle with CSS?
a.
border–radius
b.
border
c.
color
d.
line–height
1
302
1
299
Name:
Class:
Date:
33. A design exhibits __________ when it uses newer styles in modern browsers while displaying a usable layout and all
page content in older browsers.
a.
graceful degradation
b.
responsive design
c.
absolute positioning
d.
transforms
1
304
34. Which of the following script libraries is a popular tool for implementing graceful degradation?
a.
Modernizr
b.
Bootstrap
c.
jQuery
d.
Angular
1
304
35. The process of testing a browser to detect which properties are supported is known as __________.
a.
feature detection
b.
browser sniffing
c.
graceful degradation
d.
progressive enhancement
1
304
36. Modernizr applies a set of CSS classes to which element?
a.
html
b.
body
c.
script
d.
div
1
304
37. When you use Modernizr, you can write style rules that apply only to children of elements with specific __________
values.
a.
class
b.
ID
c.
type
d.
src
1
304
38. A change in the appearance of an element in one or more specific ways, including rotating, scaling, skewing, or
moving it, is known as a(n) __________.
a.
transform
b.
translation
c.
animation
d.
keyframe animation
1
Name:
Class:
Date:
39. Which of the following is the browser prefix for Microsoft browsers?
a.
–ms–
b.
–moz–
c.
–webkit–
d.
-o-
1
306
40. CSS features that gradually apply changes to properties in response to user actions over a number of seconds are
known as __________.
a.
transforms
b.
transitions
c.
animations
d.
keyframe animations
b
1
308
41. An animation created using animation properties and the @keyframes rule is known as a(n) __________.
a.
transform
b.
transition
c.
keyframe animation
d.
JavaScript animation
1
310
42. Which property specifies the time in seconds from the start of an animation to the end of the animation?
a.
animation–duration
b.
animation–delay
c.
animation–direction
d.
animation–iteration–count
1
311
43. Which property determines the rhythm of a transition?
a.
transition–timing–function
b.
transition–delay
c.
transition–duration
d.
transition–property
1
309
44. To create an @keyframes rule, you specify a(n) __________ for the rule after the keyword @keyframes.
a.
name
b.
class value
c.
src value
d.
length
1
310
306
Name:
Class:
Date:
45. Referring to the figure above, what does the code 45deg specify?
a.
the starting point and direction
b.
the starting color
c.
an intermediate
d.
the ending color
1
46. Referring to the figure above, what does the code #d823c5 specify?
a.
the starting point and direction
b.
the starting color
c.
an intermediate color
d.
the ending color
1
47. Referring to the figure above, what does the code #edd010 specify?
a.
the starting point and direction
b.
the starting color
c.
an intermediate color
d.
the ending color
1
48. Referring to the figure above, the property name –ms–transform incorporates a(n) __________.
a.
browser prefix
b.
class name
c.
pseudo-element
d.
pseudo-class
1
306-307
49. Referring to the figure above, what is the effect of the value scale(1.2)?
a.
rotates the element 1.2 degrees
b.
resizes the element 1.2 times its original size
Name:
Class:
Date:
c.
moves opposite sides in opposite directions to create an angle of 1.2 degrees
d.
repositions the element 1.2em from its default position horizontally and vertically
50. Referring to the figure above, when are the declarations applied to the elements selected by the style rule?
a.
when the web page is first rendered by the browser
b.
when a user moves the mouse pointer over the elements
c.
when a user clicks the elements
d.
when the elements have valid content
51. Referring to the figure above, what does the code reveal-sun represent?
a.
the class value of the element to which the code applies
b.
the name of the keyframe animation
c.
the text that is animated
d.
the title of the animation
52. Referring to the figure above, what does the code 50% represent?
a.
the point in time halfway through the animation
b.
the point in time when the animated object has moved halfway across the browser window
c.
the point in time when the animated object has moved halfway across the parent element
d.
the location halfway down the browser window
Name:
Class:
Date:
Case-Based Critical Thinking Question
Rosa is implementing a new layout for her jewelry store website by incorporating visual effects using CSS. In particular,
she is adding generated content and visual form feedback.
53. For elements that should not have generated content, Rosa can use the content property with a value of
__________.
a.
“” (an empty string)
b.
” “ (quotes containing a space)
c.
” *”
d.
none
1
296
Critical Thinking
54. To specify properties for a form field with content that meets the rules for the field, Rosa should use the __________
pseudo-class.
a.
:valid
b.
:invalid
c.
:focus
d.
:checked
1
Critical Thinking
55. To specify properties for the form field that has the focus, Rosa should use the __________ pseudo-class.
a.
:valid
b.
:invalid
c.
:focus
d.
:checked
299
Critical Thinking
Case-Based Critical Thinking Question
Jerry is in charge of the website for a travel company. He wants to incorporate animation into the website so that when a
user moves the mouse pointer over an image, the image gradually increases in size.
56. Jerry could use a keyframe animation to create the effect, or he could use a(n) __________.
a.
gradient
b.
transition
c.
responsive design
d.
CSS shape
1
Critical Thinking
310-311
Name:
Class:
Date:
57. Which pseudo-class would Jerry use to specify the styles for the new visual effect?
a.
:focus
b.
:hover
c.
:active
d.
:checked
Critical Thinking
58. If Jerry created his visual effect using a keyframe animation, which property would he use to specify how long the
animation takes?
a.
animation–delay
b.
animation–duration
c.
animation–iteration–count
d.
animation–timing–function
Critical Thinking
59. You can add generated content using the :before and __________ pseudo-elements.
60. You can use pseudo-classes to change the properties of input elements and other elements in __________ in
response to user actions.
61. When you click a form field, it has the focus and the declarations in a style rule using the __________ pseudo-class
are applied.
62. You can specify a gradient as a value of the background-image property or use the shorthand __________
property.
63. The __________ keyword prevents a gradient from repeating.
Name:
Class:
Date:
ANSWER:
no-repeat
1
REFERENCES:
300
64. You can create a perfect circle using CSS by specifying a border radius of __________%.
fifty
1
REFERENCES:
302
65. Because the transform property is a relatively new CSS feature, it was implemented in some browsers with browser
__________, which are words or abbreviations that are added to the start of a property name.
prefix
POINTS:
1
306
66. __________ animations enable you to control more aspects of an animation than transitions.
ANSWER:
Keyframe
1
REFERENCES:
310
67. Because the @-webkit-keyframes rule and the :valid pseudo-class are not part of the CSS specification, they
cause __________ errors.
validation
POINTS:
1
310
Matching
Match each pseudo-class with the appropriate description.
a.
:active
b.
:checked
c.
:focus
d.
:required
e.
:valid
REFERENCES:
299
68. the element is in the process of being clicked or otherwise activated
1
69. the element has the focus
POINTS:
1
Name:
Class:
Date:
70. the content entered by a user meets the rules for the field
71. user entry in the field is required
72. the element is checked or otherwise selected
73. Describe how to create a circle using CSS, including 3 properties required to do so and their values.
74. Explain the difference between transitions and keyframe animations, including at least one advantage of each.
75. Name the two parts of the syntax for creating a linear gradient, and describe the role of each part.