CIW Advanced HTML5 & CSS3 Specialist 2 — Questions and Answers
Question 1: Which CSS3 property is used to add rounded corners to an element's border box?
- corner-radius
- rounded-corner
- border-style
- border-radius (Correct answer)
Correct answer: border-radius
border-radius accepts one to four length values and applies rounded corners to the corners of an element's outer border edge.
Question 2: What is the purpose of the CSS3 @media rule?
- To import external stylesheets at runtime
- To apply styles conditionally based on device characteristics or screen size (Correct answer)
- To define reusable CSS custom properties
- To declare CSS keyframe sequences
Correct answer: To apply styles conditionally based on device characteristics or screen size
The @media rule applies a block of CSS only when specific conditions (such as minimum screen width) are true, enabling responsive design.
Question 3: Which CSS3 property controls the speed curve of a transition effect?
- transition-speed
- transition-curve
- transition-timing-function (Correct answer)
- animation-timing
Correct answer: transition-timing-function
transition-timing-function specifies the acceleration curve (ease, linear, ease-in, ease-out, cubic-bezier, etc.) for a CSS transition.
Question 4: Which CSS3 flexbox property aligns flex items along the cross axis (perpendicular to the main axis)?
- justify-content
- flex-wrap
- align-items (Correct answer)
- flex-direction
Correct answer: align-items
align-items sets the default alignment for all flex items along the cross axis of the flex container.
Question 5: What CSS3 property applies shadow effects behind an element's border box?
- text-shadow
- drop-shadow
- box-shadow (Correct answer)
- element-shadow
Correct answer: box-shadow
box-shadow applies one or more shadow effects to the exterior of an element's box, defined by offset, blur, spread, and color values.
Question 6: Which CSS3 pseudo-class selector targets an element only when it is the first child of its parent?
- element:first
- element:first-child (Correct answer)
- element:nth-child(1st)
- element:first-type
Correct answer: element:first-child
:first-child matches an element that is the very first child node within its parent, regardless of element type.
Question 7: Which CSS3 function creates a smooth color transition from one point to another along a straight line?
- gradient()
- color-gradient()
- radial-gradient()
- linear-gradient() (Correct answer)
Correct answer: linear-gradient()
linear-gradient() generates an image that transitions between colors along a straight line at a specified angle or direction.
CIW Advanced HTML5 & CSS3 Specialist 2
Which CSS3 property is used to add rounded corners to an element's border box?