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. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
background: [color] [image] [repeat] [attachment] [position];
position (with values: left, center, right, top, center, bottom)
reset
comma (,)

2. HTML tag used for embedded styles
child
href="<relative URL here>"
Relative
<style>

3. Shortcut HEX code for #FF99AA
height
#F9A
RGBA
id

4. Three ways to code CSS3 colors: _____ - HSL - HSLA
RGBA
:focus pseudo-class
pseudo-class
attribute

5. Keyword with 'background' that specifies if and how an image repeats
box-shadow
first-letter
embedded styles
repeat (values: repeat, repeat-x, repeat-y, no-repeat)

6. HSL: Hue - Saturation - ______
link
Lightness
-o-
-webkit-

7. What does this do? padding: 2px, 4px, 6px, 8px;
descendant
media
only-child
Nothing! the values are not comma separated (delimited)

8. Attribute for an external style sheet
16
clickable
collapsed
rel="stylesheet"

9. Attribute specifying the location of an external style sheet
em
descendant
href="<relative URL here>"
visited

10. HTML5 structural tags in older browsers must be styled as _____ elements
block
Nothing! the values are not comma separated (delimited)
border: [width] [style] [color];
rel="stylesheet"

11. Four 'flavors' of relational selectors: ________ - adjacent sibling - child (not supported by some older browsers like IE6) - general sibling (new to CSS3)
descendant
multiple selectors
!important
#F9A

12. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
border: [width] [style] [color];
Firefox
multiple selectors
comma (,)

13. ________ are selectors that let you select a portion of text
#F9A
margin
id
Pseudo-elements

14. Three common CSS3 pseudo-classes: first-child - last-child - _______
unordered (<ul>)
position (with values: left, center, right, top, center, bottom)
only-child
zero out

15. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
visited
box-shadow
Lightness
adjacent sibling

16. Rules with a higher _____ are the ones that will be used
specificity
only-child
position (with values: left, center, right, top, center, bottom)
Box Model

17. Two common pseudo-elements: ______ - first-line
<style>
box-shadow
HEX code
first-letter

18. Backwards compatibility for __________ & shadows -webkit-box-shadow
formatting
rel="stylesheet"
screen
Chrome & Safari

19. Five common CSS pseudo classes:link - _______ - active - hover - focus
min-width
RGBA
visited
descendant

20. Sequence in which styles are applied: _______ - embedded - inline
margin
external
-moz-
Firefox

21. #main { padding: 1em;} is an example of a selector made by _____
link
general sibling (new to CSS3)
id
position (with values: left, center, right, top, center, bottom)

22. Two new box model properties in CSS3: border-radius and ________
background-image: linear-gradient(direction, color %, color %, ...);
visited
box-shadow
child

23. List alignments work best with ____ measurements
background: [color] [image] [repeat] [attachment] [position];
:focus pseudo-class
background-image: linear-gradient(direction, color %, color %, ...);
em

24. _____ measurements are recommended for font sizes
width
attribute selectors
Relative
unordered (<ul>)

25. In order of most to least specificity by selector type: id, (class, attribute, _____), (element or pseudo-element)
box-shadow
#F9A
only-child
pseudo-class

26. Shorthand for background property
screen
class (.)
link
background: [color] [image] [repeat] [attachment] [position];

27. Default for the media attribute
a:link{text-decoration: none;}
screen
user style sheet
box-shadow

28. Linear gradient syntax
16
clickable
background-image: linear-gradient(direction, color %, color %, ...);
http://html5shiv.googlecode.com/svn/trunk/html5.js

29. The colon (:) is indicative of __________
adjacent sibling
-moz-
pseudo-classes
specificity

30. Prefix for linear gradient commands in Firefox
Chrome & Safari
16
-moz-
reset

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

32. HSLA: Hue - Saturation - Lightness - _____
descendant
a:link{text-decoration: none;}
Alpha
Pseudo-classes

33. A rule to remove bullets from a list
Relative
Chrome & Safari
ul{ list-style: none;}
border: [width] [style] [color];

34. Shorthand border syntax
pseudo-class
formatting
attribute
border: [width] [style] [color];

35. #main li { color: green;} is an example of a _____ selector
Pseudo-elements
descendant
margin
Lightness

36. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
Nothing! the values are not comma separated (delimited)
a:link{text-decoration: none;}
<li>
collapsed

37. The delimiter symbol for multiple selectors for the same rule set
comma (,)
Relative
height
:focus pseudo-class

38. The p.highlight selector is more _____ than the .highlight selector
specific
Firefox
attribute
descendant

39. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
descendant
width
specific
media

40. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
<li>
visited
!important
repeat (values: repeat, repeat-x, repeat-y, no-repeat)

41. #main>p{ font-size: 11pt; } is an example of a ______ selector
!important
last
screen
child

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

43. There are ____ descriptive color names
16
only-child
last
zero out

44. The 'external' space or 'force field' between an element & it's containing element
:focus pseudo-class
margin
Alpha
child

45. These 'flavors' of selectors are often used by JavaScript
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
Relative
specificity
attribute selectors

46. 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 ______
<style>
class
-o-
:focus pseudo-class

47. h2+p { margin-top: .5em} is an example of a _____ selector
adjacent sibling
16
media
visited

48. Wildcard (universal selector) to select all elements
class (.)
border: [width] [style] [color];
external
*

49. border shorthand syntax
border: [width] [style] [color];
-o-
adjacent sibling
block

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