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. ________ are selectors that let you select a portion of text
Lightness
unordered (<ul>)
descendant
Pseudo-elements

2. Prefix for linear gradient commands in Opera
-o-
repeat (values: repeat, repeat-x, repeat-y, no-repeat)
specific
specificity

3. To mark a rule so that it will override any other rules
background: [color] [image] [repeat] [attachment] [position];
!important
HEX code
:focus pseudo-class

4. A rule to remove bullets from a list
user style sheet
box-shadow
ul{ list-style: none;}
comma (,)

5. Sequence in which styles are applied: _______ - embedded - inline
specificity
em
external
min-width

6. The default width of an element:As wide as the ______ that contains it
descendant
Pseudo-elements
attribute selectors
block

7. The 'external' space or 'force field' between an element & it's containing element
attribute
margin
multiple selectors
*

8. Zeroing out the default browser styles using the wildcard selector (*) is often call using the _____ selector
href="<relative URL here>"
reset
media
Firefox

9. In order of most to least specificity by selector type: id, (class, attribute, _____), (element or pseudo-element)
16
pseudo-class
position (with values: left, center, right, top, center, bottom)
:focus pseudo-class

10. What does this do? padding: 2px, 4px, 6px, 8px;
rel="stylesheet"
Nothing! the values are not comma separated (delimited)
<li>
Box Model

11. Keyword with 'background' that specifies the initial horizontal and vertical positions of an image
attachment (with values of 'scroll' or 'fixed')
position (with values: left, center, right, top, center, bottom)
attribute
multiple selectors

12. HTML5 structural tags in older browsers must be styled as _____ elements
a img {border: none;}
HEX code
block
width

13. CSS is a special language used just for _____
comma (,)
formatting
attachment (with values of 'scroll' or 'fixed')
min-width

14. Backwards compatibility for ________ & rounded corners & shadows -moz-border-radius & -moz-box-shadow
descendant
Firefox
adjacent sibling
Chrome & Safari

15. The p.highlight selector is more _____ than the .highlight selector
block
specific
pseudo-classes
-o-

16. The ____ attribute is used to specify the platform that the style sheet is for (mobile - print etc)
Lightness
unordered (<ul>)
media
background: [color] [image] [repeat] [attachment] [position];

17. These 'flavors' of selectors are often used by JavaScript
height
multiple selectors
id
attribute selectors

18. Two new box model properties in CSS3: border-radius and ________
box-shadow
:focus pseudo-class
id
<li>

19. h2+p { margin-top: .5em} is an example of a _____ selector
:focus pseudo-class
border: [width] [style] [color];
adjacent sibling
width

20. Three common CSS3 pseudo-classes: first-child - last-child - _______
rel="stylesheet"
:focus pseudo-class
only-child
visited

21. Default for the media attribute
background-image: linear-gradient(direction, color %, color %, ...);
Firefox
screen
first-letter

22. Prefix for linear gradient commands in Safari & Chrome
-webkit-
!important
RGBA
screen

23. _______ are predefined classes that apply to specific conditions
general sibling (new to CSS3)
height
Pseudo-classes
Pseudo-elements

24. _______ Memory Aid: TRBL ('trouble' = top, right, bottom, left)
screen
Box Model
attribute selectors
id

25. 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
first-letter
screen
adjacent sibling
unordered (<ul>)

26. There are ____ descriptive color names
child
block
external
16

27. HSLA: Hue - Saturation - Lightness - _____
Alpha
attribute selectors
16
href="<relative URL here>"

28. Height of a box: top margin + top border + top padding + ______ + bottom padding + bottom border + bottom margin
height
Relative
attribute
formatting

29. box-shadow syntax: _________: horzOffset vertOffset blurRadius spread color; (not comma separated)
border: [width] [style] [color];
box-shadow
height
-webkit-

30. Attribute for an external style sheet
position (with values: left, center, right, top, center, bottom)
rel="stylesheet"
ul{ list-style: none;}
Relative

31. HTML tag used for embedded styles
width
a img {border: none;}
class (.)
<style>

32. Tag used to bring CSS into a web page from an external source
specificity
link
child
#F9A

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

34. Three ways to code CSS3 colors: _____ - HSL - HSLA
RGBA
Pseudo-classes
width
http://html5shiv.googlecode.com/svn/trunk/html5.js

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

36. [ ] are indicative of _______ selectors
attribute
margin
<style>
clickable

37. Two common pseudo-elements: ______ - first-line
first-letter
rel="stylesheet"
#F9A
box-shadow

38. 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
block
class (.)
Relative

39. 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
Pseudo-elements
<style>
embedded styles
zero out

40. #main>p{ font-size: 11pt; } is an example of a ______ selector
-moz-
child
<style>
width

41. Rule to remove underlining in a hyperlink that hasn't yet been visited
Box Model
multiple selectors
a:link{text-decoration: none;}
min-width

42. Three ways to provide styles: external style sheet - ________- style attributes applied to a single element (inline)
position (with values: left, center, right, top, center, bottom)
Alpha
visited
embedded styles

43. * [ href ] { font-size: 95%; } is an example of a(n) _____ selector
type
href="<relative URL here>"
attribute
<style>

44. The delimiter symbol for multiple selectors for the same rule set
ul{ list-style: none;}
rel="stylesheet"
clickable
comma (,)

45. 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
#F9A
class
width

46. border shorthand syntax
child
type
border: [width] [style] [color];
unordered (<ul>)

47. Linear gradient syntax
child
user style sheet
Firefox
background-image: linear-gradient(direction, color %, color %, ...);

48. The colon (:) is indicative of __________
comma (,)
<style>
id
pseudo-classes

49. Five common CSS pseudo classes:link - _______ - active - hover - focus
height
class (.)
descendant
visited

50. URL for bringing in a JavaScript 'shiv' or 'shim' for elements to be used in older browsers
pseudo-class
http://html5shiv.googlecode.com/svn/trunk/html5.js
Chrome & Safari
attribute