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. Width of a box: left margin + left border + left padding + _____ + right padding + right border + right margin
width
descendant
specific
Nothing! the values are not comma separated (delimited)

2. Sequence in which styles are applied: _______ - embedded - inline
general sibling (new to CSS3)
zero out
user style sheet
external

3. .right {text-align: right;} is an example of a selector made by _______
Firefox
Pseudo-classes
class
type

4. ________ are selectors that let you select a portion of text
class
http://html5shiv.googlecode.com/svn/trunk/html5.js
Pseudo-elements
general sibling (new to CSS3)

5. Shorthand border syntax
multiple selectors
screen
border: [width] [style] [color];
Chrome & Safari

6. Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector
reset
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
Pseudo-elements
attribute

7. Two new box model properties in CSS3: border-radius and ________
Box Model
id
box-shadow
Firefox

8. h2+p { margin-top: .5em} is an example of a _____ selector
width
pseudo-class
adjacent sibling
HEX code

9. HTML tag used for embedded styles
<style>
block
a:link{text-decoration: none;}
Chrome & Safari

10. 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
-o-
zero out
16
formatting

11. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
box-shadow
-o-
embedded styles
link

12. Three ways to code CSS3 colors: _____ - HSL - HSLA
descendant
background-image: linear-gradient(direction, color %, color %, ...);
min-width
RGBA

13. The delimiter symbol for multiple selectors for the same rule set
Pseudo-classes
clickable
comma (,)
attachment (with values of 'scroll' or 'fixed')

14. In order of most to least specificity by selector type: id, (class, attribute, _____), (element or pseudo-element)
pseudo-class
RGBA
formatting
reset

15. HSL: Hue - Saturation - ______
child
Lightness
HEX code
unordered (<ul>)

16. Default for the media attribute
screen
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
child
height

17. border shorthand syntax
*
pseudo-classes
adjacent sibling
border: [width] [style] [color];

18. The p.highlight selector is more _____ than the .highlight selector
specific
width
reset
border: [width] [style] [color];

19. Shortcut HEX code for #FF99AA
collapsed
child
zero out
#F9A

20. The default width of an element:As wide as the ______ that contains it
type
block
attribute
user style sheet

21. A rule to remove a hyperlink border from around an image hyperlink
Relative
height
Nothing! the values are not comma separated (delimited)
a img {border: none;}

22. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
em
box-shadow
visited
border: [width] [style] [color];

23. 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 ______
rel="stylesheet"
ul{ list-style: none;}
pseudo-classes
:focus pseudo-class

24. Five common CSS pseudo classes:link - _______ - active - hover - focus
visited
width
padding
last

25. h2~p { margin-left: 2em; } is an example of a ______ selector
general sibling (new to CSS3)
box-shadow
class (.)
collapsed

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

27. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
a img {border: none;}
Box Model
margin
border: [width] [style] [color];

28. Attribute specifying the location of an external style sheet
16
href="<relative URL here>"
type
<li>

29. [ ] are indicative of _______ selectors
attribute
box-shadow
last
min-width

30. There are ____ descriptive color names
last
!important
background-image: linear-gradient(direction, color %, color %, ...);
16

31. The 'external' space or 'force field' between an element & it's containing element
HEX code
last
-moz-
margin

32. Some users with special needs may have set up a ______ which have a higher ranking in the 'cascade'
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
user style sheet
only-child
height

33. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
comma (,)
position (with values: left, center, right, top, center, bottom)
descendant
border: [width] [style] [color];

34. What does this do? padding: 2px, 4px, 6px, 8px;
Pseudo-classes
background-image: linear-gradient(direction, color %, color %, ...);
Nothing! the values are not comma separated (delimited)
16

35. If a bottom margin encounters an adjacent top margin they are _____ and the larger margin is applied
zero out
collapsed
descendant
media

36. 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
background: [color] [image] [repeat] [attachment] [position];
Alpha
ul{ list-style: none;}
unordered (<ul>)

37. Use this 'flavor' of selector if you want to target multiple elements on a page with the same styling
Alpha
attachment (with values of 'scroll' or 'fixed')
class (.)
:focus pseudo-class

38. HSLA: Hue - Saturation - Lightness - _____
specific
Alpha
-moz-
background-image: linear-gradient(direction, color %, color %, ...);

39. List alignments work best with ____ measurements
specificity
zero out
ul{ list-style: none;}
em

40. 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
Firefox
attribute
user style sheet

41. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
id
box-shadow
background-image: linear-gradient(direction, color %, color %, ...);
media

42. Linear gradient syntax
background-image: linear-gradient(direction, color %, color %, ...);
Nothing! the values are not comma separated (delimited)
Alpha
link

43. Prefix for linear gradient commands in Safari & Chrome
-webkit-
attribute selectors
descendant
repeat (values: repeat, repeat-x, repeat-y, no-repeat)

44. Rule to remove underlining in a hyperlink that hasn't yet been visited
specificity
a:link{text-decoration: none;}
Relative
clickable

45. #main>p{ font-size: 11pt; } is an example of a ______ selector
Alpha
pseudo-class
child
rel="stylesheet"

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

47. h1, h2, h3 {color: blue;} is an example of _____
*
multiple selectors
-o-
border: [width] [style] [color];

48. _______ are predefined classes that apply to specific conditions
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
Pseudo-classes
RGBA
specificity

49. CSS is a special language used just for _____
user style sheet
attribute
formatting
http://html5shiv.googlecode.com/svn/trunk/html5.js

50. A rule to remove bullets from a list
ul{ list-style: none;}
#F9A
class (.)
block