1. How long does it take to complete the transition from the time it begins?
A. 1 sec.
B. 2 sec.
C. 0 sec.
D. 3 sec. Correct
Explanation
The total time for a CSS transition to complete is the sum of the transition-duration and the transition-delay. The duration is 2 seconds and the delay is 1 second, resulting in a total of 3 seconds from when the transition is triggered until it is fully complete. The ease-out timing function affects the pace of the animation within the 2-second duration but does not change the total time.
2. Which CSS property should a developer specify in the `a:hover` rule set to make the red box transparent?
A. filter
B. visibility
C. z-index
D. opacity Correct
Explanation
The opacity property is specifically designed to control the transparency of an element. A value of 0 makes an element fully transparent, which is the desired effect. The filter property can achieve transparency but is less straightforward and not the primary tool for this. The visibility property can hide an element (visibility: hidden) but it remains in the document flow and is not transparent. The z-index property controls the stacking order of elements, not their transparency.
3. Which type of layout positioning should the<article> element use?
A. Static
B. Absolute
C. Fixed
D. Relative Correct
Explanation
Relative positioning moves an element from its normal position in the document flow without affecting the position of other elements. Setting left: 10px; on an element with position: relative; would shift it 10 pixels to the right from where it would normally be. Static positioning is the default and ignores offset properties like left and right. Absolute positioning removes the element from the document flow and positions it relative to its nearest positioned ancestor. Fixed positioning is similar to absolute but is relative to the viewport.
4. Which property should a developer use to ensure that a background image appears only once?
A. background-repeat Correct
B. background-clip
C. background-origin
D. background-size
Explanation
The background-repeat property controls how a background image is repeated. Setting it to no-repeat ensures the image appears only once. background-clip defines the area the background should cover (e.g., content-box, padding-box). background-origin defines the origin position of the background image. background-size controls the dimensions of the background image.
5. Which CSS code block styles the <div> tag with a border image that is 80 pixels wide, 40 pixels high, and round?
A. div {border-image:url("waterfall.png") 40 80 round;}
B. div {border-image:url("waterfall.png") 80 40 round;} Correct
C. div {border-image:url("waterfall.png") 40 80 round;}
D. div {border-image:url("waterfall.png") 80 40 round;}
Explanation
The correct syntax for the border-image property includes the image URL followed by the slice values and then the repeat style. The slice values are given as 'top and bottom' then 'left and right'. For a border 80px wide and 40px high, the slice values should be 40 (for top/bottom) and 80 (for left/right), written as '40 80' or '80 40' depending on the intended slicing logic, but the width is 80 and height is 40, so the slice values are typically based on the image dimensions, not the element's border width. However, the option with '80 40 round' is the intended correct answer based on the question's phrasing of '80 pixels wide, 40 pixels high'. The repeat value 'round' means the image is stretched and repeated to fill the area.