Deck 5: Introduction to Cascading Style Sheets

Question 1

Which of the following statements about animation-timing-functions is false

A) The value linear specifies that the animation will move at the same speed from start to finish.
B) The value ease starts slowly, increases speed, then ends faster.
C) The ease-in value starts slowly, then speeds up, whereas the ease-out value starts faster, then slows down.
D) Finally, the cubic-bezier value allows you to customize the timing function with four values between 0 and 1, such as cubic-bezier(1,0,0,1).

Answer 1

B

Question 2

The ________ property adds rounded corners to any element.

A) blur-radius
B) border-radius
C) radial-gradient
D) linear-gradient

Answer 2

B

Question 3

________ are a type of image that gradually transitions from one color to the next horizontally, vertically or diagonally.

A) Box shadows
B) Color stops
C) Radial gradients
D) Linear gradients

Answer 3

D

Question 4

If you do not include the animation-play-state, it defaults to ________.

A) play
B) run
C) paused
D) running

Question 5

Which of the following is not a valid value of the animation-timing-function

A) linear
B) linear-ease-out
C) ease-in-out
D) cubic-bezier

Question 6

The ________ is the URL of the image to use in the border.

A) border-image-source
B) border-image
C) image-source
D) image-border-source

Question 7

Which of the following is a valid value for the animation-direction

A) normal
B) clockwise
C) clockwise
D) Both (b) and (c)

Question 8

Which of the following statements about reflections is false

A) The -webkit-box-reflect property allows you to add a simple reflection of an image.
B) The property's first value is the direction of the reflection.
C) The offset determines the direction of the reflection-above, below, to the right or to the left of the original image.
D) You can specify a gradient to apply to the reflection.

Question 9

Which of the following statements about text strokes is false

A) Text stroke is a nonstandard property for WebKit-based browsers that allows you to add an outline (text stroke) around text.
B) You can specify the thickness of the outline and the color of the text stroke.
C) Text stroke allows you to specify the font style.
D) Both (a) and (c)

Question 10

Which of the following statements is false

A) Vendor prefixes are used for properties that are still being finalized in the CSS specification but have already been implemented in various browsers.
B) Prefixes are not available for every browser or for every property.
C) It's good practice to include the multiple prefixes when they're available so that your pages render properly in the various browsers.
D) Always place vendor-prefixed styles after the nonprefixed version.

Question 11

CSS3 allows you to add multiple background images to an element. Each image's placement is specified using property ________.

A) backgroundimage
B) background-position
C) background-origin
D) image-background

Question 12

When using gradients, you can transition between as many colors as you like and specify the points at which to change colors, called ________.

A) color-stops
B) color-starts
C) gradient-stops
D) transitions

Question 13

The radial-gradient property has three values. The first is the ________.

A) position of the start of the radial gradient
B) start color
C) end color
D) size of the radial gradient

Question 14

The ________ specifies the inward offsets from the top, right, bottom and left sides of the image.

A) border-image-offset
B) image-slice
C) border-slice
D) border-image-slice

Question 15

If the CSS3 text-shadow property's horizontal offset is -10, the text-shadow will appear ________.

A) to the right of the text
B) above the text
C) below the text
D) to the left of the text

Question 16

The ________ property adds a shadow to an element.

A) text-shadow
B) box-shadow
C) blur-radius
D) linear-gradient

Question 17

Which of the following statements is false

A) The blur radius of a shadow can have a value of 0 or greater.
B) The higher the value of the blur radius, the more the edges of the shadow are blurred.
C) The blur radius has a maximum value of 360.
D) A blur radius of 0 means there's no blur on the shadow.

Question 18

If the value of the blur radius is ________, no shadow will appear.

A) 1
B) -1
C) 10
D) 0

Question 19

The @keyframes rule is followed by the name of the ________ to which the keyframes are applied.

A) transition
B) animation
C) transformation
D) media query

Question 20

The border-image-slice divides the image into ________ regions.

A) four
B) nine
C) two
D) six

Question 21

CSS3 ________ allow you to move, rotate, scale and skew elements.

A) selectors
B) transitions
C) transformations
D) translations

Question 22

CSS3 rules consist of one or more ________ followed by a declaration block in curly braces ({}).

A) selectors
B) keyframes
C) attributes
D) prefixes

Question 23

The scale transformation function specifies how to scale the width and height. The value ________ represents the original width or original height.

A) 0
B) 1
C) 100
D) 10

Question 24

In CSS3, you can use ________ to easily style attributes, such as changing the background color of every other row in a table to blue.

A) media queries
B) selectors
C) the Flexible Box Layout Module
D) transformations

Question 25

________ allow you to determine the finer attributes of the device on which the user is viewing the page, such as the length and width of the viewing area on the screen, to customize your presentation.

A) Media queries
B) Device queries
C) Screen queries
D) Selectors

Question 26

Setting the ________ to hidden hides any text that does not fit in the specified paragraph height.

A) overflow
B) flexbox
C) :nth-child
D) box-layout

Question 27

Using the ________, you can specify fonts for a web page, even if they're not installed on the user's system.

A) @font-face rule
B) @font rule
C) @media rule
D) font-family property

Question 28

The ________ specifies that the font will be used when the document is rendered on a computer screen.

A) @font-face rule
B) @media rule
C) @media screen rule
D) font-family property

Question 29

An animation's ________ enable you to control intermediate states throughout the animation's duration.

A) keyframes
B) transitions
C) transformations
D) selectors

Question 30

CSS3 ________ allow you to change an element's style over a specified duration.

A) transitions
B) transformations
C) animations
D) selectors

Question 31

The ________ is used to determine the type and size of device on which the page is rendered.

A) media property
B) @media-size rule
C) @media rule
D) @media-type rule

Question 32

________ make(s) it easy to align the contents of boxes, change their size, change their order dynamically, and lay out the contents in any direction.

A) The Flexbox Model
B) :nth-child selectors
C) The Box Orientation
D) The Flexible Box Layout Module

Question 33

CSS3 allows you to create multicolumn layouts using the ________ property.

A) column-rule
B) column-count
C) column-gap
D) column-style

Question 34

Add lines between columns using CSS3's ________ property.

A) column-count
B) column-gap
C) column-rule
D) column-style

Question 35

The ________ determines how the transition progresses in one cycle of its duration.

A) transition-duration
B) transition-progress
C) transition-timing-function
D) transition-cycle

Question 36

Which of the following is not a transformation function used by the transform property

A) rotate
B) scale
C) skewX
D) flip