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
<li>
attribute selectors
-moz-
box-shadow

2. HTML5 structural tags in older browsers must be styled as _____ elements
block
Chrome & Safari
clickable
16

3. ________ are selectors that let you select a portion of text
Relative
attribute
clickable
Pseudo-elements

4. The 'internal' space between content area & border
background: [color] [image] [repeat] [attachment] [position];
specificity
general sibling (new to CSS3)
padding

5. Shortcut HEX code for #FF99AA
em
#F9A
embedded styles
<style>

6. The 'external' space or 'force field' between an element & it's containing element
only-child
Pseudo-classes
id
margin

7. Three ways to code CSS3 colors: _____ - HSL - HSLA
width
RGBA
pseudo-classes
unordered (<ul>)

8. Three ways to specify colors in traditional CSS:color name - RGB - _______
HEX code
formatting
Pseudo-classes
specific

9. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
block
external
em
height

10. URL for bringing in a JavaScript 'shiv' or 'shim' for elements to be used in older browsers
unordered (<ul>)
block
http://html5shiv.googlecode.com/svn/trunk/html5.js
a:link{text-decoration: none;}

11. Linear gradient syntax
general sibling (new to CSS3)
background-image: linear-gradient(direction, color %, color %, ...);
:focus pseudo-class
ul{ list-style: none;}

12. Six properties for setting heights & widths: width - height - ______- max-width - min-height - max-height
min-width
-webkit-
Box Model
!important

13. Wildcard (universal selector) to select all elements
-moz-
*
visited
ul{ list-style: none;}

14. 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
<style>
block
zero out
*

15. An HTML element may be a selector (<p> for example). This is known as a rule that selects by ______
Box Model
type
a:link{text-decoration: none;}
#F9A

16. Default for the media attribute
pseudo-class
screen
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
box-shadow

17. Tag used to bring CSS into a web page from an external source
link
rel="stylesheet"
formatting
em

18. CSS is a special language used just for _____
-webkit-
Alpha
formatting
type

19. Shorthand border syntax
rel="stylesheet"
attachment (with values of 'scroll' or 'fixed')
background: [color] [image] [repeat] [attachment] [position];
border: [width] [style] [color];

20. HSL: Hue - Saturation - ______
Lightness
<li>
attribute
reset

21. Rules with a higher _____ are the ones that will be used
-moz-
Alpha
ul{ list-style: none;}
specificity

22. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
Firefox
Alpha
em
attachment (with values of 'scroll' or 'fixed')

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

24. Width of a box: left margin + left border + left padding + _____ + right padding + right border + right margin
<style>
descendant
id
width

25. 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
a img {border: none;}
href="<relative URL here>"
HEX code
width

26. The colon (:) is indicative of __________
pseudo-classes
rel="stylesheet"
http://html5shiv.googlecode.com/svn/trunk/html5.js
Alpha

27. Five common CSS pseudo classes:link - _______ - active - hover - focus
height
visited
<style>
descendant

28. #main { padding: 1em;} is an example of a selector made by _____
collapsed
id
descendant
Box Model

29. Prefix for linear gradient commands in Firefox
:focus pseudo-class
multiple selectors
-moz-
box-shadow

30. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
media
class
collapsed
-o-

31. [ ] are indicative of _______ selectors
HEX code
background-image: linear-gradient(direction, color %, color %, ...);
Alpha
attribute

32. _____ measurements are recommended for font sizes
Relative
rel="stylesheet"
position (with values: left, center, right, top, center, bottom)
type

33. #main li { color: green;} is an example of a _____ selector
descendant
screen
attribute selectors
adjacent sibling

34. 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
background-image: linear-gradient(direction, color %, color %, ...);
pseudo-classes
specific
last

35. There are ____ descriptive color names
16
class
unordered (<ul>)
pseudo-classes

36. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
descendant
margin
box-shadow
Box Model

37. These 'flavors' of selectors are often used by JavaScript
background-image: linear-gradient(direction, color %, color %, ...);
block
pseudo-classes
attribute selectors

38. 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 ______
:focus pseudo-class
Firefox
padding
repeat (values: repeat, repeat-x, repeat-y, no-repeat)

39. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
user style sheet
class (.)
box-shadow
pseudo-classes

40. Three common CSS3 pseudo-classes: first-child - last-child - _______
ul{ list-style: none;}
attribute
only-child
attachment (with values of 'scroll' or 'fixed')

41. _______ are predefined classes that apply to specific conditions
*
!important
Pseudo-classes
attribute selectors

42. A rule to remove bullets from a list
Box Model
width
ul{ list-style: none;}
Lightness

43. HSLA: Hue - Saturation - Lightness - _____
box-shadow
Alpha
position (with values: left, center, right, top, center, bottom)
screen

44. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
formatting
embedded styles
Pseudo-classes
class

45. 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>)
*
pseudo-class
attribute selectors

46. Prefix for linear gradient commands in Opera
-o-
formatting
media
adjacent sibling

47. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
<style>
border: [width] [style] [color];
media
attachment (with values of 'scroll' or 'fixed')

48. Two common pseudo-elements: ______ - first-line
id
zero out
specific
first-letter

49. The delimiter symbol for multiple selectors for the same rule set
attribute
a:link{text-decoration: none;}
clickable
comma (,)

50. h2+p { margin-top: .5em} is an example of a _____ selector
embedded styles
Firefox
<style>
adjacent sibling