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
link
Relative
background-image: linear-gradient(direction, color %, color %, ...);
adjacent sibling

2. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
:focus pseudo-class
attribute
http://html5shiv.googlecode.com/svn/trunk/html5.js
position (with values: left, center, right, top, center, bottom)

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

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

5. Two new box model properties in CSS3: border-radius and ________
box-shadow
HEX code
embedded styles
first-letter

6. Three common CSS3 pseudo-classes: first-child - last-child - _______
#F9A
only-child
-o-
position (with values: left, center, right, top, center, bottom)

7. To format the space between a bullet and text in an unordered list style some left padding on the _____ element within the list
<li>
*
specific
Chrome & Safari

8. 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
clickable
first-letter
collapsed
Nothing! the values are not comma separated (delimited)

9. h1, h2, h3 {color: blue;} is an example of _____
descendant
width
Firefox
multiple selectors

10. URL for bringing in a JavaScript 'shiv' or 'shim' for elements to be used in older browsers
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
pseudo-classes
multiple selectors
http://html5shiv.googlecode.com/svn/trunk/html5.js

11. HTML tag used for embedded styles
<style>
block
attachment (with values of 'scroll' or 'fixed')
-moz-

12. In order of most to least specificity by selector type: id, (class, attribute, _____), (element or pseudo-element)
-webkit-
Nothing! the values are not comma separated (delimited)
box-shadow
pseudo-class

13. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
user style sheet
attribute
min-width
box-shadow

14. Attribute for an external style sheet
rel="stylesheet"
class (.)
pseudo-classes
HEX code

15. A rule to remove bullets from a list
Chrome & Safari
-o-
ul{ list-style: none;}
a img {border: none;}

16. HSLA: Hue - Saturation - Lightness - _____
external
Alpha
padding
adjacent sibling

17. Keyword with 'background' that specifies if and how an image repeats
id
:focus pseudo-class
a:link{text-decoration: none;}
repeat (values: repeat, repeat-x, repeat-y, no-repeat)

18. 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
child
min-width
screen
width

19. The default width of an element:As wide as the ______ that contains it
:focus pseudo-class
Chrome & Safari
specificity
block

20. .right {text-align: right;} is an example of a selector made by _______
border: [width] [style] [color];
class
position (with values: left, center, right, top, center, bottom)
width

21. Attribute specifying the location of an external style sheet
href="<relative URL here>"
width
specificity
first-letter

22. 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
media
Alpha
zero out
reset

23. The 'internal' space between content area & border
Box Model
class (.)
padding
border: [width] [style] [color];

24. #main { padding: 1em;} is an example of a selector made by _____
width
padding
id
16

25. The p.highlight selector is more _____ than the .highlight selector
position (with values: left, center, right, top, center, bottom)
attribute
specific
-o-

26. What does this do? padding: 2px, 4px, 6px, 8px;
Nothing! the values are not comma separated (delimited)
Chrome & Safari
margin
pseudo-classes

27. A rule to remove a hyperlink border from around an image hyperlink
border: [width] [style] [color];
multiple selectors
a:link{text-decoration: none;}
a img {border: none;}

28. Rules with a higher _____ are the ones that will be used
box-shadow
specificity
<li>
descendant

29. HSL: Hue - Saturation - ______
<li>
Lightness
border: [width] [style] [color];
height

30. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
a:link{text-decoration: none;}
collapsed
general sibling (new to CSS3)
only-child

31. Five common CSS pseudo classes:link - _______ - active - hover - focus
-o-
class (.)
visited
padding

32. Wildcard (universal selector) to select all elements
#F9A
pseudo-class
*
comma (,)

33. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
id
height
box-shadow
a:link{text-decoration: none;}

34. Four 'flavors' of relational selectors: ________ - adjacent sibling - child (not supported by some older browsers like IE6) - general sibling (new to CSS3)
descendant
Relative
HEX code
class

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

36. _______ are predefined classes that apply to specific conditions
user style sheet
reset
screen
Pseudo-classes

37. Two common pseudo-elements: ______ - first-line
Chrome & Safari
-o-
first-letter
reset

38. Shorthand border syntax
border: [width] [style] [color];
external
background-image: linear-gradient(direction, color %, color %, ...);
background: [color] [image] [repeat] [attachment] [position];

39. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
class (.)
only-child
block
child

40. Sequence in which styles are applied: _______ - embedded - inline
embedded styles
adjacent sibling
unordered (<ul>)
external

41. Rule to remove underlining in a hyperlink that hasn't yet been visited
border: [width] [style] [color];
!important
comma (,)
a:link{text-decoration: none;}

42. Prefix for linear gradient commands in Opera
-o-
attribute
a img {border: none;}
last

43. [ ] are indicative of _______ selectors
last
collapsed
attribute
rel="stylesheet"

44. Six properties for setting heights & widths: width - height - ______- max-width - min-height - max-height
rel="stylesheet"
media
-o-
min-width

45. Shorthand for background property
padding
:focus pseudo-class
background: [color] [image] [repeat] [attachment] [position];
clickable

46. The delimiter symbol for multiple selectors for the same rule set
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
comma (,)
height
pseudo-classes

47. The colon (:) is indicative of __________
:focus pseudo-class
height
media
pseudo-classes

48. Tag used to bring CSS into a web page from an external source
16
comma (,)
link
box-shadow

49. Shortcut HEX code for #FF99AA
a:link{text-decoration: none;}
#F9A
padding
specificity

50. #main li { color: green;} is an example of a _____ selector
box-shadow
descendant
margin
media