CSS 3 Test 2015

1. Is @keyframes an method of animations in CSS3?

Answers:

• No

• Yes

2. If the same property is styled at the beginning and at the end of a stylesheet...

Answers:

• both stylings will apply

• they will cancel each other out

• only the former will apply

• only the latter will apply

3. Is ::first-line a pseudo-element?

Answers:

• True

• False

4. When style in different locations conflict, which will take precedence?

Answers:

• External style sheet referenced in a LINK element

• <style> block included in the HEAD element

• Inline style attribute

5. The correct way to select only inputs which are "disabled" is?

Answers:

• input:readonly

• Cannot be done with CSS3

• input:hidden

• input:disabled

• input:not('active')

6. To have a box-shadow inside of the div use:

Answers:

• stroke

• outset

• inline

• inset

7. li:nth-child(2n+1) { background-color: rgba(225, 0, 30, 0.8); }  This code will:

Answers:

• change the background color for each odd numbered li tag

• change the background color for each even numbered li tag

• make the background color red

• combine two li tags on one line

8. If a layout is created in a PSD with blue buttons in the nav, then it would be best for the speed of the page to:

Answers:

• Create the button using CSS

• Add the button img to the background using CSS

• Slice the buttons and use an href

• Cut and paste the button onto the page

9. Webkit has it's own prefix and works in:

Answers:

• IE

• Webkit browsers only

• Safari

• All browsers

10. Which one of these is not a font-weight descriptor in CSS3?

Answers:

• italic

• 900

• bold

• 200

11. Whether or not a browser accepts a styling is called:

Answers:

• browser sniffing

• browser support

• deprecated code

• hack

12. Is the following valid? "box-shadow: -5px -5px -5px #ccc;"

Answers:

• No

• Yes

13. To create more space within a CSS3 button use:

Answers:

• margin

• cell-padding

• cell-spacing

• padding

14. To give the effect of using tables without actually using tables in the HTML use:

Answers:

• display:block

• display:table

• display:row

• display:column

15. To change the state of a selector you must change its:

Answers:

• Property

• Model

• Syntax

• Element

16. What would a:link be an example of?

Answers:

• pseudo-class

• iteration

• p tag

• none of these

17. Which selector can be used to target every element on a page?

Answers:

• body

• $

• *

• html

18. Is it true that the z-index property only applies to positioned elements?

Answers:

• No

• Yes

19. Before using CSS3 declarations it is important to:

Answers:

• turn on CSS3 styling in the header

• be aware of the browser support

• turn off all other existing styles

• run a CSS3 JavaScript

20. Does CSS3 totally take over CSS2 or can the two be mixed?

Answers:

• No

• Yes

• mixed

21. Which of the following options below has the correct CSS syntax?

Answers:

• p (color:red;text-align:center;)

• p {color:red; text-align:center;}

• p {color:red; text-align:center}

• p {color:red; text-align:center};

22. Use _____ to spread out the letters of each word in a sentence.

Answers:

• word spacing

• letter-spacing

• padding

• align-right

23. In an unordered list, to turn off the bullets on the li tags use:

Answers:

• list-style: none;

• list-type: none;

• display: none;

• li: none;

24. What are the 4 current vendor prefixes for css3 properties? (5 major desktop browsers, not mobile or tv)

Answers:

• -ff, -ch, -sf, -op, -ie

• -moz-, -webkit-, -o, -ms,

• -moz-, -web-kit-, -opera-, -micro-

• -moz, -wap, -xv, -epub

• -ie, -fox, -apples, -oprah

25. What does this code do? @import url("mystyle.css");

Answers:

• links this stylesheet to the html page

• makes this shylesheet most important

• import style rules from other style sheets

• overrides all other stylesheet

26. Which of the following is NOT a feature of CSS3:

Answers:

• All of these are features of CSS3.

• It allows to animate multiple properties on one element.

• It allows multiple border styles on one element.

• It allows multiple text shadows on one element.

• It allows multiple backgrounds on one element.

27. True or False: The borders of an element can vary only up to 2 sides.

Answers:

• False

• True

28. To set opacity of the background of an element, use:

Answers:

• Color:#000(50%)

• Background-color:rgba(0,0,0,0.5)

• Background:rgb(#000 -30%)

• Color:rgb(0,0,0,0.5)

29. When styling for devices with 3-3.5 inch screen sizes it's best to use:

Answers:

• resolution finders

• screen shots

• media queries

• max-borders

30. Which is correct use of border-radius?

Answers:

• 5px 5px 5px 5px;

• 2px 3px;

• any of these

• 2px;

31. What property is used when creating custom fonts?

Answers:

• @font-face

• @font

• Custom-font

• Font[custom font]

32. What would 'p:first-child' be an example of?

Answers:

• iteration

• pseudo-class

• none of these

• p tag

33. CSS elements specified in a stylesheet should always end with ___________.

Answers:

• a comma ( , )

• a colon ( : )

• a parenthesis ( ) )

• a curly bracket ( } )

34. Using li:nth-child(odd) will:

Answers:

• affect li tags with a class of nth-child

• affect only the odd numbered li tags

• cause a border to occur

• add margin to every other li tag

35. In CSS3 it is possible to specify the size of the background image...

Answers:

• ...in pixels or percentages.

• ...in pixels only.

• ... in neither: the size is determined by the actual image size.

• ...in percentages only.

36. To get li tags to sit side by side use:

Answers:

• Display: right

• Display: left

• Display: side

• Display: inline

37. After assigning a value to a property you should end the statement with a:

Answers:

• Semi-colon

• Colon

• Period

• Dot

38. In this order, content, padding, border, margin, these best represent _____

Answers:

• Height

• Width

• CSS Box Model

• Dimensions

39. To use CSS to make the corners of an element round without the use of scripting use:

Answers:

• Border-radius

• CSS box model

• Jquery

• Curvy corners

40. True or False: Due to CSS box model you cannot create a circle using CSS3.

Answers:

• True

• False

41. Opacity can cause an image to appear:

Answers:

• luminescent

• tilted

• faded

• to glow

42. How do you set the opacity at 50% for this image for an image of id="image"?

Answers:

• #image{color:50%}

• #image{opacity:0.5;}

• #image{background:rgb(0,0,0,0 -50%)

43. Can you rotate images in CSS3 and if you can what is the right method to do so?

Answers:

• Yes, spin

• No

• Yes, turn

• Yes, rotate

• Yes, position

44. True or False: In CSS3, one can add multiple background images.

Answers:

• True

• False

45. What is the syntax of opacity in CSS3?

Answers:

• filter:alpha(opacity=40)

• -ie-filter:alpha(opacity=40)

• filter:alpha(opacity=0.4)

• opacity:0.4;

• -ms-filter:alpha(opacity=40)

46. In CSS, * is called a:

Answers:

• None of these

• id tag

• universal selector

• comment

47. Transitions are best supported in:

Answers:

• Internet Explorer 8 and higher

• Internet Explorer 7 and higher

• Netscape Navigator

• WebKit browsers

48. CSS can be used to style...

Answers:

• SVG

• all of these

• XHTML

• XML

49. When making an animation in CSS3, can the image change color as it moves or does it have to wait till it makes destination?

Answers:

• Yes

• No

50. How would you cause an element to acquire the font-family of its parent element?

Answers:

• parent: inherit

• font-family: inherit;

• font-family: accept;

• font: inherit;

51. When using HTML5 canvas it's good to...

Answers:

• Let the user know the pages browser preference.

• Focus on building in a compatible browser .

• All of the these.

• Create a browser compatibility warning before the user enters the page.

52. To style a section element, you may use:

Answers:

• section [section] {color: red;}

• section {color: red;}

• section {[section] color: red;}

53. When using multiple images on a background you must also set the _____ for both.

Answers:

• addon

• hover state

• positioning

• plugin

54. CSS specifications are maintained by:

Answers:

• W3C

• Mozilla

• SVG

• Open Source Developers

55. Can you expand the width of an element with a hover action in transitions in CSS3 or only other elements?

Answers:

• Yes

• No, only other elements like color and opacity.

56. In some instances CSS3 has replaced the need for:

Answers:

• Layout images

• Animated GIFs

• All of the these

• Flash movies

57. What browser is transform-style not supported in

Answers:

• Firefox

• Internet Explorer

• Opera

• Safari

58. True or False: CSS3 can be used to create images and animation.

Answers:

• False

• True

59. Can you use negative values for box-shadow in CSS3?

Answers:

• Yes

• No

60. Before you can use CSS3 you must first add a:

Answers:

• Jquery script

• Add-on

• None of these

• Plugin

61. What is the limit assigned to using the :nth-child(-n+X) pseudo-selector where "X" represents the number of matches you wish to include?

Answers:

• 100

• 500

• 20

• Infinite

• 10

62. What are different ways to apply styles to a Web page?

Answers:

• Embedded

• All of these

• Imported

• Inline

• Linked

63. The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

Answers:

• True

• False

64. CSS2 and CSS3 styles can be combined.

Answers:

• True

• False

65. To remove the underline from an href use:

Answers:

• text: line-none

• visibility: none

• text-decoration: none;

• display: none

66. True or False: A roll-over effect can be acheived using CSS.

Answers:

• True

• False

67. True or False: You can create a full navigation bar including background color, buttons, horizontal or vertical alignment using all CSS!

Answers:

• True

• False

68. Can you make text seem hollow with CSS3?

Answers:

• No

• Yes

69. True or False: CSS3 allows you to animate divs.

Answers:

• False

• True

70. Using CSS3 you can create multi-colored:

Answers:

• all of these

• squares

• circles

• triangles

71. True or False? The word-wrap and overflow-wrap properties have the same effects.

Answers:

• True

• False

72. CMYK color model can be used with CSS in modern browsers?

Answers:

• False

• True

73. What CSS value scales the background image to the largest size contained within the element?

Answers:

• cover

• contain

• fill

• repeat

74. Does z-index: -1 place the element behind its parent?

Answers:

• No

• Only if the parent establishes a local stacking context

• Yes

• Only if the parent does not establish a local stacking context

75. How do you add a comment in CSS?

Answers:

• /* Comment */

• // Comment

• <? Comment ?>

• # Comment

76. Which color will show this css value : #000000;

Answers:

• white

• Black

• red

• green

• blue

77. Which color will show this css value : #ffffff;

Answers:

• Red

• Blue

• Green

• White

• Black

78. You can use HTML attributes to define styles inline.

Answers:

• True

• False

79. What tag would you use to make an internal style sheet on your HTML document?

Answers:

• <css>

• <script>

• <stylesheet>

• <style>

80. How would you make the background color of all the divs on a page blue?

Answers:

• div { style: "background-color: blue" }

• div { color: blue; }

• div# { background-color: blue; }

• div { background-color: blue; }

81. How would you add three columns to a page using CSS3

Answers:

• div { column-counter:3; }

• div { -webkit-column-count: 3 /* Chrome, Safari, Opera*/ -moz-column-count: 3 /* Firefox */ column-count:3; }

82. Which CSS property would you use to make text italicized?

Answers:

• text-decoration

• font-style

• font-decoration

• text-style

83. What line of HTML would you use to reference an external style sheet?

Answers:

• <link src="example.css" rel="stylesheet">

• <link rel="stylesheet" type="text/css" href="example.css">

• <link rel="text/css" type="stylesheet" href="example.css">

• <a href="example.css" type="stylesheet">

84. How can you apply a "bounce" effect to an element?

Answers:

• Create an animation which moves the element to a position transitionally, followed by another faster but shorter move, in the opposite diretion.

• Move it using "cubic-bezier", with greater values than normal.

• Both answers are correct.

85. Generated Content is added in CSS by which syntax pattern?

Answers:

• element:content { before: "foo"; }

• content:element { "foo"; }

• before::element { content: "foo"; }

• element:before { content: "foo"; }

86. What would the following CSS do?  text-transform: capitalize;

Answers:

• Capitalize all letters

• This wouldn't do anything

• Capitalize the first letter of every word

87. How would you use CSS3's new selectors to match the last 2 elements of a particular type?

Answers:

• :last-child[type=element_type](-n+2)

• You can't do that with CSS

• :nth-last-child(-n+2)

• :last-of-type(-n+2)

88. To make text appear on a page just by hovering over any portion of a page use:

Answers:

• title

• text

• hover

• alt

89. What do you need to change in order to visually modify a button on mouseover?

Answers:

• URL

• Hover state

• Tag name

• Button file

90. What is the method to stretch an image as a border in CSS3?

Answers:

• #round

• #stretch

• #extend

• #expand

91. In webkit, in order to set the transition duration you must first:

Answers:

• set the timing function

• give it an attribute

• set the transition property

• set the display

92. To specify the character encoding in an external stylesheet use:

Answers:

• @import

• @charset

• !Important

• @media

93. Which of the following is NOT a proper CSS browser prefix?

Answers:

• -o-linear-gradiant: { }

• -webkit-border-radius: { }

• -ie-border-radius: { }

• -moz-border-radius: { }

94. True or False: With the implementation of CSS3, CSS1 and CSS2 are no longer needed.

Answers:

• False

• True

95. How can you apply a "bounce" effect to an element?

Answers:

• Move it using "cubic-bezier", with greater values than normal.

• Both answers are correct.

• Create an animation which moves the element to a position transitionally, followed by another faster but shorter move, in the opposite diretion.

96. How would you set a background image to not repeat?

Answers:

• div { background-repeat: no-repeat; }

• div { image: no repeat; }

• div { background-image: no-repeat; }

97. True or False? Round corners were supported before CSS3

Answers:

• True

• False

98. Generated Content is added in CSS by which syntax pattern?

Answers:

• content:element { "foo"; }

• element:before { content: "foo"; }

• element:content { before: "foo"; }

• before::element { content: "foo"; }

99. Which one of the following selector checks if the attribute begins with "val"?

Answers:

• [att~=val]

• [att/=val]

• [att^=val]

• [att*=val]

• [att>=val]

100. How would you add three columns to a page using CSS3

Answers:

• div { -webkit-column-count: 3 /* Chrome, Safari, Opera*/ -moz-column-count: 3 /* Firefox */ column-count:3; }

• div { -webkit-column-count: 3 /* Chrome, Safari, Opera*/ -moz-column-count: 3 /* Firefox */ column:3; }

• div { column-counter:3; }

101. Portrait and Landscape specific stylings are used for:

Answers:

• Mobile devices (phones, tablets)

• Internet TV

• Both of these

102. What does this selector do? ul ~ p { color: red; }

Answers:

• Only selects the first p element that is immediately preceded by a ul element

• Selects any ul elements that follow a p element.

• Selects any p elements that follow a ul.

• Selects both ul elements and p elements in the DOM.

103. Which of these is not a valid CSS3 color value?

Answers:

• transparent

• hsla(240, 100%, 50%, 0.4)

• hsb(177, 65, 62)

• hsl(120, 100%, 50%)

• rgba(255, 0, 0, 0.4)

104. Pick the INCORRECT selector

Answers:

• element[att*=val]

• element[att^=val]

• element[att+=val]

• element[att$=val]

105. True or False: CSS3 selectors are different from CSS1 and CSS2 selectors.

Answers:

• True

• False

106. Is this code written correctly?: span[hello="Cleveland"],[goodbye="Columbus"] { color: blue; }

Answers:

• True

• False

107. All properties must have a:

Answers:

• Element

• Attribute

• None of these

• Value

108. Which of the following transitions follows the correct format?

Answers:

• width 1s linear 2s:transition;

• transition: 1s linear width 2s;

• transition: (linear 1s) (width 2s)

• transition: width 1s linear 2s;

• transition: 1s 2s width linear

109. Have all of the CSS3 properties been implemented in the modern browsers?

Answers:

• Yes

• All except Internet Explorer.

• No

• All except Safari

110. rgba differs from the opacity declaration in that:

Answers:

• rgba works on all media types, whereas opacity is text-only

• rgba controls only the element it references, while opacity controls itself and all child elements

• rgba is the deprecated predecessor to opacity

• rgba controls itself and all child elements, while opacity controls only the element it references

111. To debug for Section 508 compliance you may want to check that all images contain alt tags. To do this you use:

Answers:

• find{alt}

• @media_query {alt:?}

• img:not([alt])

112. What would the standard syntax to use a gradient in CSS3?

Answers:

• background: linear-gradient:bottom right, orange, blue);

• background: linear-gradient(bottom right: orange, blue);

• background: linear-gradient(to bottom right, orange, blue);

113. The background-origin property specifies the positioning area of background images, which can be placed...

Answers:

• ...within the border-box area.

• ...within the content-box or padding-box area.

• ...within the context-box or border-box area.

• ...within the content-box, padding-box, or border-box area.

114. What is the shorthand version of the CSS3 property transition?

Answers:

• transition: attribute length effect speed

• transition-effect: attribute time swing count

• transition: property duration timing-function delay

• trans: property length effect speed

115. Do you have to use -webkit- for border images in CSS3?

Answers:

• No

• Yes

116. Which property is used to specify type faces ?

Answers:

• Font-name

• Font-family

• Font-face

• Font-type

117. Which of these properties does NOT exist in CSS3?

Answers:

• box-sizing

• border-image

• word-wrap

• background-size

• text-opacity

118. Complete this styling. text-shadow:

Answers:

• 2px 2px 2px 2px #666

• 2px 2px 2px #666

• #666 2px

• 2px #666 2px #666

119. In HTML5, how can you visually center this <div class="center">hi</div>?

Answers:

• .center{position:relative; left:50%;}

• .center{text-align:center;}

• .center{margin:0 auto; width:250px; }

• .center{position:absolute; left:50%;}

• .center{float:center;}

120. Which is a recognized media type?

Answers:

• screen

• handheld

• All of these

• speech

121. What is the earliest version of Internet Explorer that supports border-radius?

Answers:

• 8.0

• 7.0

• 10.0

• 9.0

122. The CSS3 specification will allow for the use of generated gradients as background images.

Answers:

• Only with browser-specific prefixes

• False

• True

123. Given the following HTML snippet:  <h1 class="title header">Hello</h1>  And the following CSS:  h1 { color: blue; } .title.header { color: red; } .title { color: green; }  What color will the text "Hello" have?

Answers:

• Blue

• Green

• Default color, ie no color is set

• Red

124. We write single ______ before the pseudo-class property.

Answers:

• dot

• colon

• semi colon

• hash

125. What would 'a:focus:hover' be an example of?

Answers:

• Link tag

• Active tag

• Dynamic pseudo-class

• Focus state

126. The two primary stylesheet languages are CSS and:

Answers:

• VMA

• XSL

• SVG

• EHT

127. The correct way to select <li> elements which are "even" in terms of their placement (ie. 2nd, 4th, 6th, etc) would be?

Answers:

• li:nth-child(4n)

• None of these

• li:nth-child(n%2)

• li:nth-child(even)

• li:even-child

128. In order to animate you must use the _____ property.

Answers:

• Transition

• Automation

• All of these

• Ease-in

129. You can specify the horizontal shadow, vertical shadow and the ______ distance in text-shadow.

Answers:

• fade

• fadeout

• sharpe

• blur

130. What does the :empty pseudo class target?

Answers:

• Elements that are invisible.

• Elements that have no parents.

• Elements that have no children.

• Elements that have no CSS associated with them.

131. If there is not enough room for a float on a line it is:

Answers:

• shifted upward

• shifted downward

• overlapping

• hidden

132. _____ positioned boxes are taken out of the normal flow.

Answers:

• Static

• Absolute

• Normal

• Relative

133. With the emergence of CSS3, CSS2 has become:

Answers:

• defunct

• none of these

• useless

• destandarized

134. Do "left", "top", "right" and "bottom" properties apply to all positioned elements?

Answers:

• No, they are valid only for relatively positioned elements

• Yes

• No, they are valid only for absolutely positioned elements

135. Pseudo-classes are used to represent ___________________.

Answers:

• Related Events

• Static Events

• Dynamic Events

• Casual Events

136. This code will affect: @media print {h1#first { position: static }

Answers:

• none of these

• all browsers as well as print

• all media devices except print

• print only

137. To turn text into all uppercase, use:

Answers:

• uppercase:

• text-transform:

• shout:

• any of these

• capitalize:

138. In CSS, > is called a:

Answers:

• less than symbol

• operator

• carat

• combinator

139. How would you use CSS3's new selectors to match the last 2 elements of a particular type?

Answers:

• :last-of-type(-n+2)

• :nth-last-child(-n+2)

• :last-child[type=element_type](-n+2)

• You can't do that with CSS

140. Which of the following is not a correct keyword value for the font-stretch property?

Answers:

• extra-condensed

• micro-condensed

• macro-expanded

• semi-expanded

• condensed

141. Can you use CSS3 with older version of HTML?

Answers:

• Yes

• No

142. Which of the following is NOT new in CSS3?

Answers:

• Multiple box models (switchable)

• Fluent animations

• Media queries

• 3D

• Multi-column

143. Which of the following is not a new background property in CSS3?

Answers:

• background-shadow

• background-clip

• background-size

• background-origin

144. Which of the following represents correct CSS shorthand for setting font family, font size, line-height and font weight for an element?

Answers:

• font: bold 18px verdana; line-height: 1.2;

• font: bold 18px/1.2 verdana;

• font: bold 18px verdana 1.2;

• Not possible

• font: bold 18px verdana;

145. What is the correct syntax of wrapping of the word in CSS3?

Answers:

• text-wrap:normal;

• word-wrap: break-word;

• word-wrap: auto;

• text-wrap: break-word;

146. Which of these properties does not exist?

Answers:

• transition

• background-size

• transparency

• border-image

• They all exist.

147. How wide is the following div? div { box-sizing:border-box; width: 200px; padding: 20px; border:1px solid #000; }

Answers:

• 200px

• 202px

• 240px

• 242px

148. How can we call different bullets without using classes to the particular <li>?

Answers:

• li /line break/ li+li /line break/ li+li+li /line break/

• li span.bullet

• li span p

• li span

149. To make an element move fast or slow what property must you change?

Answers:

• Speed or Duration

• Transition or Speed

• Animation or Speed

• Duration or Transition

150. What is the earliest Internet Explorer and Chrome that supports multiple columns?

Answers:

• 10.0, 4.0

• 11.0, 4.0

• 8.0, 3.0

• 9.0, 4.0

151. The concept of designing a site which retains its meaning and functionality, even when certain (usually older) browsers cause display faults, is called...

Answers:

• Degrading Enhancements

• Progressive Enhancement

• Graceful Degradation

• Cross-browser Degradation

152. What are two of the four sizes with radial gradients?

Answers:

• closest-angle, farthest-side

• closest-angle, farthest-angle

• farthest-corner, farthest-angle

• closest-side, farthest-corner

153. How would you repeat a gradient in CSS3?

Answers:

• background-repeat: linear-gradient(red, blue 10%, green 20%);

• background: repeating-linear-gradient(red, blue 10%, green 20%);

154. What is the common CSS3 trick used to trigger hardware acceleration on mobile devices?

Answers:

• Use media queries

• Use 3D transforms (for 2D with Z axis set to 0)

• Use CSS Animations (exclusively)

• Use display:hw-accelerated

• Use 2D transforms (3D are not accelerated)

155. To set the clipping region of an element use:

Answers:

• Overflow: hidden

• Display: clip

• Clipping

• Clip

156. Which of these is NOT a valid css3 pseudo class?

Answers:

• :blank

• :only-child

• :root

• :not(s)

• :empty

157. To use a fading link transition use:

Answers:

• Duration

• Slow-fade

• Ease-in

• Fade-in

158. When using background-clip, values can be added to:

Answers:

• boxer-box

• padding-box

• padding-box and margin-box

• margin-box

159. What CSS3 attribute is not correct

Answers:

• translate()

• all are right

• scale()

• slide()

• matrix()

160. Which of the following is NOT a new CSS3 pseudo selector?

Answers:

• :target

• :nth-child

• :not

• :includes

• :only-of-type

161. What does the font-size-adjust property do?

Answers:

• It specifies an aspect value for an element that will effectively preserve the x-height of the first choice font

• It specifies an aspect value for an element that will effectively preserve the x-height and y-width of the first choice font

• It specifies an aspect value for an element that will effectively preserve the y-width of the first choice font

• It specifies the font-size relative to the parent element

• It specifies the font-size relative to the root element

162. To make text appear on a page just by hovering over any portion of a page use:

Answers:

• Time's Up!

• text

• hover

• alt

• title

163. CSS3 allows us to specify an inset text-shadow, similar to box-shadow.

Answers:

• False

• True