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. Linear gradient syntax
http://html5shiv.googlecode.com/svn/trunk/html5.js
user style sheet
Chrome & Safari
background-image: linear-gradient(direction, color %, color %, ...);

2. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
adjacent sibling
height
-o-
class (.)

3. _______ are predefined classes that apply to specific conditions
Pseudo-classes
em
padding
comma (,)

4. A rule to remove bullets from a list
ul{ list-style: none;}
padding
specificity
Chrome & Safari

5. HTML5 structural tags in older browsers must be styled as _____ elements
user style sheet
specific
#F9A
block

6. Two new box model properties in CSS3: border-radius and ________
height
box-shadow
pseudo-classes
user style sheet

7. Three ways to specify colors in traditional CSS:color name - RGB - _______
visited
width
HEX code
pseudo-class

8. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
media
unordered (<ul>)
Firefox
Nothing! the values are not comma separated (delimited)

9. An HTML element may be a selector (<p> for example). This is known as a rule that selects by ______
HEX code
type
block
attribute selectors

10. Two common pseudo-elements: ______ - first-line
16
first-letter
min-width
border: [width] [style] [color];

11. border shorthand syntax
descendant
border: [width] [style] [color];
class
type

12. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
<style>
embedded styles
child
rel="stylesheet"

13. 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
-webkit-
zero out
Alpha
class (.)

14. The default width of an element:As wide as the ______ that contains it
-o-
href="<relative URL here>"
<li>
block

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

16. What does this do? padding: 2px, 4px, 6px, 8px;
*
formatting
ul{ list-style: none;}
Nothing! the values are not comma separated (delimited)

17. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
child
<li>
box-shadow
HEX code

18. Keyword with 'background' that specifies if and how an image repeats
min-width
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
height
-o-

19. Default for the media attribute
box-shadow
rel="stylesheet"
descendant
screen

20. 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 ______
margin
Firefox
a:link{text-decoration: none;}
:focus pseudo-class

21. Attribute for an external style sheet
ul{ list-style: none;}
rel="stylesheet"
specificity
collapsed

22. Sequence in which styles are applied: _______ - embedded - inline
background-image: linear-gradient(direction, color %, color %, ...);
external
attribute selectors
zero out

23. .right {text-align: right;} is an example of a selector made by _______
last
box-shadow
class
formatting

24. 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
width
Lightness
height

25. h2+p { margin-top: .5em} is an example of a _____ selector
pseudo-classes
background-image: linear-gradient(direction, color %, color %, ...);
adjacent sibling
attribute

26. CSS is a special language used just for _____
zero out
Relative
padding
formatting

27. h1, h2, h3 {color: blue;} is an example of _____
-webkit-
background-image: linear-gradient(direction, color %, color %, ...);
child
multiple selectors

28. ________ are selectors that let you select a portion of text
only-child
pseudo-classes
Pseudo-elements
external

29. 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
type
unordered (<ul>)
a:link{text-decoration: none;}
descendant

30. The delimiter symbol for multiple selectors for the same rule set
comma (,)
background: [color] [image] [repeat] [attachment] [position];
child
!important

31. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
block
RGBA
<li>
visited

32. List alignments work best with ____ measurements
em
clickable
*
padding

33. Three common CSS3 pseudo-classes: first-child - last-child - _______
Box Model
only-child
a img {border: none;}
margin

34. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
collapsed
min-width
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
box-shadow

35. The 'internal' space between content area & border
href="<relative URL here>"
padding
class (.)
pseudo-classes

36. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
last
Firefox
collapsed
height

37. Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector
-o-
specific
HEX code
reset

38. Rules with a higher _____ are the ones that will be used
specificity
padding
child
border: [width] [style] [color];

39. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
Box Model
box-shadow
unordered (<ul>)
user style sheet

40. 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
collapsed
width
only-child
rel="stylesheet"

41. [ ] are indicative of _______ selectors
-webkit-
*
min-width
attribute

42. _____ measurements are recommended for font sizes
comma (,)
margin
Relative
position (with values: left, center, right, top, center, bottom)

43. 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
screen
clickable
-o-
Chrome & Safari

44. Width of a box: left margin + left border + left padding + _____ + right padding + right border + right margin
<li>
embedded styles
width
ul{ list-style: none;}

45. #main { padding: 1em;} is an example of a selector made by _____
HEX code
type
external
id

46. There are ____ descriptive color names
attribute
16
rel="stylesheet"
Pseudo-classes

47. The p.highlight selector is more _____ than the .highlight selector
-moz-
specific
Chrome & Safari
block

48. 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
last
class
collapsed

49. h2~p { margin-left: 2em; } is an example of a ______ selector
-moz-
border: [width] [style] [color];
a img {border: none;}
general sibling (new to CSS3)

50. Prefix for linear gradient commands in Firefox
-moz-
rel="stylesheet"
width
<li>