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. #main { padding: 1em;} is an example of a selector made by _____
<style>
type
collapsed
id

2. h1, h2, h3 {color: blue;} is an example of _____
multiple selectors
-moz-
Relative
border: [width] [style] [color];

3. Keyword with 'background' that specifies if and how an image repeats
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
-webkit-
width
Alpha

4. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
class
attachment (with values of 'scroll' or 'fixed')
Box Model
Pseudo-classes

5. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
Chrome & Safari
multiple selectors
first-letter
<li>

6. The colon (:) is indicative of __________
-webkit-
link
box-shadow
pseudo-classes

7. #main li { color: green;} is an example of a _____ selector
child
media
a img {border: none;}
descendant

8. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
zero out
collapsed
pseudo-classes
position (with values: left, center, right, top, center, bottom)

9. HTML5 structural tags in older browsers must be styled as _____ elements
block
border: [width] [style] [color];
height
#F9A

10. Rules with a higher _____ are the ones that will be used
rel="stylesheet"
specificity
:focus pseudo-class
Pseudo-classes

11. List alignments work best with ____ measurements
reset
em
clickable
min-width

12. Four 'flavors' of relational selectors: ________ - adjacent sibling - child (not supported by some older browsers like IE6) - general sibling (new to CSS3)
-o-
descendant
-moz-
type

13. 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
unordered (<ul>)
ul{ list-style: none;}
em
comma (,)

14. h2+p { margin-top: .5em} is an example of a _____ selector
Pseudo-elements
pseudo-class
adjacent sibling
-webkit-

15. The p.highlight selector is more _____ than the .highlight selector
specific
!important
*
block

16. Attribute for an external style sheet
Pseudo-elements
only-child
rel="stylesheet"
last

17. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
clickable
box-shadow
border: [width] [style] [color];
ul{ list-style: none;}

18. Attribute specifying the location of an external style sheet
href="<relative URL here>"
em
only-child
reset

19. Some users with special needs may have set up a ______ which have a higher ranking in the 'cascade'
-webkit-
user style sheet
box-shadow
only-child

20. Two new box model properties in CSS3: border-radius and ________
a img {border: none;}
width
box-shadow
height

21. Sequence in which styles are applied: _______ - embedded - inline
position (with values: left, center, right, top, center, bottom)
-webkit-
ul{ list-style: none;}
external

22. * [ href ] { font-size: 95%; } is an example of a(n) _____ selector
Pseudo-classes
attribute
RGBA
href="<relative URL here>"

23. CSS is a special language used just for _____
width
Pseudo-classes
descendant
formatting

24. The default width of an element:As wide as the ______ that contains it
class (.)
block
first-letter
adjacent sibling

25. Six properties for setting heights & widths: width - height - ______- max-width - min-height - max-height
pseudo-classes
min-width
HEX code
external

26. _____ measurements are recommended for font sizes
padding
class (.)
Relative
background: [color] [image] [repeat] [attachment] [position];

27. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
last
*
Firefox
padding

28. Three ways to code CSS3 colors: _____ - HSL - HSLA
first-letter
RGBA
type
adjacent sibling

29. Shortcut HEX code for #FF99AA
#F9A
em
:focus pseudo-class
-webkit-

30. 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 ______
specific
-o-
:focus pseudo-class
collapsed

31. _______ are predefined classes that apply to specific conditions
em
background: [color] [image] [repeat] [attachment] [position];
class
Pseudo-classes

32. Three common CSS3 pseudo-classes: first-child - last-child - _______
border: [width] [style] [color];
only-child
Firefox
child

33. What does this do? padding: 2px, 4px, 6px, 8px;
general sibling (new to CSS3)
block
box-shadow
Nothing! the values are not comma separated (delimited)

34. The 'external' space or 'force field' between an element & it's containing element
block
*
-o-
margin

35. Three ways to specify colors in traditional CSS:color name - RGB - _______
HEX code
adjacent sibling
a img {border: none;}
a:link{text-decoration: none;}

36. Default for the media attribute
16
padding
screen
block

37. #main>p{ font-size: 11pt; } is an example of a ______ selector
type
background-image: linear-gradient(direction, color %, color %, ...);
child
Nothing! the values are not comma separated (delimited)

38. Prefix for linear gradient commands in Opera
unordered (<ul>)
-o-
class
rel="stylesheet"

39. A rule to remove a hyperlink border from around an image hyperlink
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
a img {border: none;}
first-letter
pseudo-classes

40. 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
-moz-
rel="stylesheet"
clickable
ul{ list-style: none;}

41. Five common CSS pseudo classes:link - _______ - active - hover - focus
visited
background-image: linear-gradient(direction, color %, color %, ...);
Alpha
child

42. Two common pseudo-elements: ______ - first-line
first-letter
margin
external
pseudo-classes

43. HSL: Hue - Saturation - ______
Lightness
collapsed
Nothing! the values are not comma separated (delimited)
background: [color] [image] [repeat] [attachment] [position];

44. These 'flavors' of selectors are often used by JavaScript
http://html5shiv.googlecode.com/svn/trunk/html5.js
attribute selectors
specificity
pseudo-class

45. Rule to remove underlining in a hyperlink that hasn't yet been visited
attachment (with values of 'scroll' or 'fixed')
<style>
a:link{text-decoration: none;}
border: [width] [style] [color];

46. Tag used to bring CSS into a web page from an external source
formatting
link
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
visited

47. Because different browsers have different default margins for block elements you often need to ________ those values using the * (wildcard) selector and set the margins explicitly
last
formatting
zero out
block

48. The 'internal' space between content area & border
width
padding
href="<relative URL here>"
Pseudo-elements

49. Shorthand border syntax
border: [width] [style] [color];
rel="stylesheet"
specificity
position (with values: left, center, right, top, center, bottom)

50. There are ____ descriptive color names
clickable
specificity
16
unordered (<ul>)