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. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
box-shadow
block
<li>
pseudo-classes

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

3. Shorthand for background property
Lightness
general sibling (new to CSS3)
background: [color] [image] [repeat] [attachment] [position];
min-width

4. HSL: Hue - Saturation - ______
Lightness
formatting
block
#F9A

5. HTML5 structural tags in older browsers must be styled as _____ elements
-moz-
adjacent sibling
block
HEX code

6. There are ____ descriptive color names
16
em
descendant
background-image: linear-gradient(direction, color %, color %, ...);

7. .right {text-align: right;} is an example of a selector made by _______
position (with values: left, center, right, top, center, bottom)
16
class
background: [color] [image] [repeat] [attachment] [position];

8. In order of most to least specificity by selector type: id, (class, attribute, _____), (element or pseudo-element)
margin
pseudo-class
descendant
!important

9. border shorthand syntax
border: [width] [style] [color];
Pseudo-classes
reset
specific

10. * [ href ] { font-size: 95%; } is an example of a(n) _____ selector
16
attribute
reset
em

11. Six properties for setting heights & widths: width - height - ______- max-width - min-height - max-height
-webkit-
attribute
min-width
child

12. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
class (.)
a img {border: none;}
Box Model
width

13. Sequence in which styles are applied: _______ - embedded - inline
block
user style sheet
external
Firefox

14. Some users with special needs may have set up a ______ which have a higher ranking in the 'cascade'
border: [width] [style] [color];
width
user style sheet
id

15. 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
reset
unordered (<ul>)
position (with values: left, center, right, top, center, bottom)
box-shadow

16. Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector
reset
class
-webkit-
attachment (with values of 'scroll' or 'fixed')

17. The p.highlight selector is more _____ than the .highlight selector
border: [width] [style] [color];
specific
href="<relative URL here>"
box-shadow

18. Four 'flavors' of relational selectors: ________ - adjacent sibling - child (not supported by some older browsers like IE6) - general sibling (new to CSS3)
http://html5shiv.googlecode.com/svn/trunk/html5.js
ul{ list-style: none;}
descendant
external

19. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
position (with values: left, center, right, top, center, bottom)
Pseudo-classes
type
media

20. HTML tag used for embedded styles
specificity
<style>
reset
href="<relative URL here>"

21. Linear gradient syntax
zero out
background-image: linear-gradient(direction, color %, color %, ...);
em
block

22. CSS is a special language used just for _____
formatting
pseudo-classes
block
min-width

23. h2+p { margin-top: .5em} is an example of a _____ selector
border: [width] [style] [color];
adjacent sibling
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
formatting

24. h2~p { margin-left: 2em; } is an example of a ______ selector
href="<relative URL here>"
general sibling (new to CSS3)
reset
border: [width] [style] [color];

25. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
type
pseudo-class
Firefox
ul{ list-style: none;}

26. Attribute specifying the location of an external style sheet
href="<relative URL here>"
-moz-
child
Pseudo-elements

27. Shortcut HEX code for #FF99AA
#F9A
unordered (<ul>)
last
pseudo-class

28. Three common CSS3 pseudo-classes: first-child - last-child - _______
height
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
only-child
general sibling (new to CSS3)

29. 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 ______
background: [color] [image] [repeat] [attachment] [position];
:focus pseudo-class
#F9A
*

30. An HTML element may be a selector (<p> for example). This is known as a rule that selects by ______
attribute selectors
<li>
type
formatting

31. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
box-shadow
user style sheet
border: [width] [style] [color];
height

32. Attribute for an external style sheet
rel="stylesheet"
formatting
attribute
link

33. Width of a box: left margin + left border + left padding + _____ + right padding + right border + right margin
*
width
external
attribute

34. Five common CSS pseudo classes:link - _______ - active - hover - focus
formatting
reset
specificity
visited

35. Shorthand border syntax
border: [width] [style] [color];
Pseudo-classes
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
pseudo-classes

36. What does this do? padding: 2px, 4px, 6px, 8px;
formatting
Nothing! the values are not comma separated (delimited)
class (.)
border: [width] [style] [color];

37. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
link
Lightness
class (.)
class

38. Backwards compatibility for __________ & shadows -webkit-box-shadow
HEX code
Nothing! the values are not comma separated (delimited)
Chrome & Safari
specificity

39. 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
16
<style>
adjacent sibling
clickable

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

41. ________ are selectors that let you select a portion of text
Pseudo-elements
embedded styles
background-image: linear-gradient(direction, color %, color %, ...);
Pseudo-classes

42. List alignments work best with ____ measurements
Pseudo-elements
adjacent sibling
padding
em

43. A rule to remove a hyperlink border from around an image hyperlink
a img {border: none;}
comma (,)
general sibling (new to CSS3)
Relative

44. 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
border: [width] [style] [color];
attachment (with values of 'scroll' or 'fixed')
descendant

45. #main li { color: green;} is an example of a _____ selector
descendant
width
only-child
unordered (<ul>)

46. _____ measurements are recommended for font sizes
*
collapsed
Relative
:focus pseudo-class

47. Rule to remove underlining in a hyperlink that hasn't yet been visited
*
unordered (<ul>)
a:link{text-decoration: none;}
Lightness

48. Tag used to bring CSS into a web page from an external source
embedded styles
attribute selectors
link
specific

49. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
margin
attribute
height
embedded styles

50. The colon (:) is indicative of __________
<li>
pseudo-classes
external
formatting