Test your basic knowledge |

CSS 3

Subject : it-skills

Instructions:

Answer 50 questions in 15 minutes.
If you are not ready to take this test, you can study here.
Match each statement with the correct term.
Don't refresh. All questions and answers are randomly picked and ordered every time you load a test.

This is a study tool. The 3 wrong answers for each question are randomly chosen from answers to other questions. So, you might find at times the answers obvious, but you will see it re-enforces your understanding as you take the test each time.

1. The delimiter symbol for multiple selectors for the same rule set
comma (,)
class
descendant
Pseudo-classes

2. Rules with a higher _____ are the ones that will be used
general sibling (new to CSS3)
<li>
Chrome & Safari
specificity

3. Two common pseudo-elements: ______ - first-line
ul{ list-style: none;}
first-letter
padding
attachment (with values of 'scroll' or 'fixed')

4. HSL: Hue - Saturation - ______
reset
Lightness
only-child
attribute

5. Attribute specifying the location of an external style sheet
clickable
Chrome & Safari
user style sheet
href="<relative URL here>"

6. Shorthand border syntax
border: [width] [style] [color];
Alpha
width
<style>

7. In a navigation bar (horizontal): Code <a> elements nested in <li> elements of an _____ list and style the <li> elements as inline using the display property
formatting
a img {border: none;}
unordered (<ul>)
type

8. border shorthand syntax
border: [width] [style] [color];
pseudo-classes
-o-
min-width

9. Three ways to specify colors in traditional CSS:color name - RGB - _______
background-image: linear-gradient(direction, color %, color %, ...);
HEX code
visited
-o-

10. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
attribute
general sibling (new to CSS3)
min-width
<li>

11. The p.highlight selector is more _____ than the .highlight selector
specific
media
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
unordered (<ul>)

12. A rule to remove a hyperlink border from around an image hyperlink
first-letter
width
a img {border: none;}
*

13. What does this do? padding: 2px, 4px, 6px, 8px;
class
a:link{text-decoration: none;}
margin
Nothing! the values are not comma separated (delimited)

14. The ______ keyword is typically used for centering an element in it's containing (parent) block - but to do that you must also specify the width of the element
visited
comma (,)
background: [color] [image] [repeat] [attachment] [position];
width

15. * [ href ] { font-size: 95%; } is an example of a(n) _____ selector
Chrome & Safari
attribute
descendant
visited

16. Attribute for an external style sheet
rel="stylesheet"
position (with values: left, center, right, top, center, bottom)
16
specificity

17. In a set of possibly conflicting rules the one that is mentioned _____ is the one that will be used and all other things being equal
padding
class (.)
attribute
last

18. To mark a rule so that it will override any other rules
class (.)
#F9A
Pseudo-classes
!important

19. In a navigation list (vertical): To make the entire box for a link ____ you can set the display property for the <a> elements to block and use padding to provide the space around the links
height
clickable
width
child

20. The 'external' space or 'force field' between an element & it's containing element
Pseudo-classes
Chrome & Safari
Relative
margin

21. .right {text-align: right;} is an example of a selector made by _______
class
:focus pseudo-class
reset
attribute

22. Five common CSS pseudo classes:link - _______ - active - hover - focus
-o-
visited
*
href="<relative URL here>"

23. Tag used to bring CSS into a web page from an external source
external
<style>
first-letter
link

24. A rule to remove bullets from a list
clickable
box-shadow
ul{ list-style: none;}
formatting

25. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
pseudo-classes
ul{ list-style: none;}
RGBA
embedded styles

26. Prefix for linear gradient commands in Opera
block
-o-
clickable
unordered (<ul>)

27. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
zero out
HEX code
class (.)
margin

28. #main { padding: 1em;} is an example of a selector made by _____
reset
background-image: linear-gradient(direction, color %, color %, ...);
id
class (.)

29. h2~p { margin-left: 2em; } is an example of a ______ selector
pseudo-classes
general sibling (new to CSS3)
background: [color] [image] [repeat] [attachment] [position];
collapsed

30. Backwards compatibility for __________ & shadows -webkit-box-shadow
Chrome & Safari
background-image: linear-gradient(direction, color %, color %, ...);
min-width
external

31. _____ measurements are recommended for font sizes
Relative
-moz-
formatting
border: [width] [style] [color];

32. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
box-shadow
height
#F9A
HEX code

33. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
first-letter
embedded styles
media
height

34. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
clickable
*
box-shadow
href="<relative URL here>"

35. The default width of an element:As wide as the ______ that contains it
-o-
multiple selectors
Nothing! the values are not comma separated (delimited)
block

36. #main li { color: green;} is an example of a _____ selector
first-letter
descendant
descendant
!important

37. Prefix for linear gradient commands in Firefox
background: [color] [image] [repeat] [attachment] [position];
attachment (with values of 'scroll' or 'fixed')
-moz-
-o-

38. Prefix for linear gradient commands in Safari & Chrome
width
Box Model
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
-webkit-

39. Two new box model properties in CSS3: border-radius and ________
min-width
box-shadow
a:link{text-decoration: none;}
Relative

40. Width of a box: left margin + left border + left padding + _____ + right padding + right border + right margin
width
last
RGBA
pseudo-classes

41. HTML5 structural tags in older browsers must be styled as _____ elements
border: [width] [style] [color];
a img {border: none;}
block
screen

42. Three ways to code CSS3 colors: _____ - HSL - HSLA
background: [color] [image] [repeat] [attachment] [position];
a:link{text-decoration: none;}
RGBA
Relative

43. #main>p{ font-size: 11pt; } is an example of a ______ selector
width
<style>
adjacent sibling
child

44. To make sure someone who can't use a mouse has the same experience as a 'mouser' style the :hover pseudo-class the same as the ______
:focus pseudo-class
margin
only-child
16

45. Shortcut HEX code for #FF99AA
rel="stylesheet"
#F9A
:focus pseudo-class
<style>

46. HTML tag used for embedded styles
attachment (with values of 'scroll' or 'fixed')
type
<style>
Box Model

47. Three common CSS3 pseudo-classes: first-child - last-child - _______
specific
padding
class (.)
only-child

48. Linear gradient syntax
background-image: linear-gradient(direction, color %, color %, ...);
comma (,)
border: [width] [style] [color];
Alpha

49. [ ] are indicative of _______ selectors
background-image: linear-gradient(direction, color %, color %, ...);
attribute
attribute selectors
block

50. Wildcard (universal selector) to select all elements
-webkit-
attribute
<style>
*