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. What does this do? padding: 2px, 4px, 6px, 8px;
Nothing! the values are not comma separated (delimited)
-moz-
class
RGBA

2. Keyword with 'background' that specifies whether an image scrolls with the document or remains in a fixed position

3. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
box-shadow
id
padding
width

4. border shorthand syntax
media
specific
border: [width] [style] [color];
reset

5. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
general sibling (new to CSS3)
descendant
Relative
embedded styles

6. Sequence in which styles are applied: _______ - embedded - inline
position (with values: left, center, right, top, center, bottom)
specific
external
reset

7. h2+p { margin-top: .5em} is an example of a _____ selector
adjacent sibling
http://html5shiv.googlecode.com/svn/trunk/html5.js
Chrome & Safari
width

8. Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector
<li>
background-image: linear-gradient(direction, color %, color %, ...);
*
reset

9. 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
unordered (<ul>)
#F9A
a:link{text-decoration: none;}
clickable

10. Shortcut HEX code for #FF99AA
formatting
<li>
#F9A
em

11. 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
last
visited
em
padding

12. The delimiter symbol for multiple selectors for the same rule set
comma (,)
Nothing! the values are not comma separated (delimited)
http://html5shiv.googlecode.com/svn/trunk/html5.js
attribute

13. Three ways to code CSS3 colors: _____ - HSL - HSLA
-webkit-
RGBA
attachment (with values of 'scroll' or 'fixed')
embedded styles

14. [ ] are indicative of _______ selectors
only-child
last
rel="stylesheet"
attribute

15. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
attribute
padding
href="<relative URL here>"
media

16. Backwards compatibility for __________ & shadows -webkit-box-shadow
reset
zero out
descendant
Chrome & Safari

17. The default width of an element:As wide as the ______ that contains it
attribute
Box Model
block
#F9A

18. The 'internal' space between content area & border
*
em
padding
box-shadow

19. There are ____ descriptive color names
clickable
width
16
position (with values: left, center, right, top, center, bottom)

20. h1, h2, h3 {color: blue;} is an example of _____
multiple selectors
Pseudo-elements
background-image: linear-gradient(direction, color %, color %, ...);
type

21. ________ are selectors that let you select a portion of text
visited
class
Pseudo-elements
link

22. 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
pseudo-class
width
reset
collapsed

23. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
unordered (<ul>)
Firefox
reset
Box Model

24. The colon (:) is indicative of __________
class
pseudo-classes
16
Box Model

25. A rule to remove bullets from a list
http://html5shiv.googlecode.com/svn/trunk/html5.js
Box Model
width
ul{ list-style: none;}

26. Keyword with 'background' that specifies if and how an image repeats
reset
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
-o-
16

27. Two new box model properties in CSS3: border-radius and ________
pseudo-classes
<li>
embedded styles
box-shadow

28. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
background-image: linear-gradient(direction, color %, color %, ...);
visited
box-shadow
position (with values: left, center, right, top, center, bottom)

29. Prefix for linear gradient commands in Opera
specific
border: [width] [style] [color];
-o-
ul{ list-style: none;}

30. URL for bringing in a JavaScript 'shiv' or 'shim' for elements to be used in older browsers
http://html5shiv.googlecode.com/svn/trunk/html5.js
a img {border: none;}
*
-moz-

31. Linear gradient syntax
!important
background-image: linear-gradient(direction, color %, color %, ...);
Alpha
#F9A

32. A rule to remove a hyperlink border from around an image hyperlink
http://html5shiv.googlecode.com/svn/trunk/html5.js
pseudo-class
id
a img {border: none;}

33. 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 ______
Chrome & Safari
last
background: [color] [image] [repeat] [attachment] [position];
:focus pseudo-class

34. HSL: Hue - Saturation - ______
child
border: [width] [style] [color];
Firefox
Lightness

35. Three common CSS3 pseudo-classes: first-child - last-child - _______
class
background: [color] [image] [repeat] [attachment] [position];
screen
only-child

36. List alignments work best with ____ measurements
clickable
attachment (with values of 'scroll' or 'fixed')
rel="stylesheet"
em

37. #main li { color: green;} is an example of a _____ selector
height
padding
descendant
HEX code

38. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
Box Model
reset
Chrome & Safari
specific

39. _____ measurements are recommended for font sizes
attribute selectors
Relative
!important
Pseudo-elements

40. h2~p { margin-left: 2em; } is an example of a ______ selector
box-shadow
child
:focus pseudo-class
general sibling (new to CSS3)

41. Shorthand border syntax
http://html5shiv.googlecode.com/svn/trunk/html5.js
multiple selectors
a:link{text-decoration: none;}
border: [width] [style] [color];

42. HTML5 structural tags in older browsers must be styled as _____ elements
id
block
position (with values: left, center, right, top, center, bottom)
-moz-

43. The 'external' space or 'force field' between an element & it's containing element
class
margin
Alpha
Lightness

44. Some users with special needs may have set up a ______ which have a higher ranking in the 'cascade'
!important
block
user style sheet
<style>

45. To mark a rule so that it will override any other rules
adjacent sibling
media
em
!important

46. Attribute specifying the location of an external style sheet
background: [color] [image] [repeat] [attachment] [position];
href="<relative URL here>"
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
width

47. 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>)
general sibling (new to CSS3)
Nothing! the values are not comma separated (delimited)
multiple selectors

48. HTML tag used for embedded styles
<style>
margin
attribute
attribute

49. Tag used to bring CSS into a web page from an external source
Alpha
link
:focus pseudo-class
-moz-

50. An HTML element may be a selector (<p> for example). This is known as a rule that selects by ______
specific
Relative
border: [width] [style] [color];
type