Chapter quiz · CSS Styling

Test what you learned.

8 questions on CSS Styling. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

CSS Styling — Chapter Quiz

Eight questions on typography, backgrounds, transforms, animations.

0/ 8

Question 1
1
For a web font that should be visible immediately with a fallback, set font-display to…
AblockBswapCoptionalDfallback
swap shows fallback text immediately, swaps in the web font when it loads. The user sees content faster.
Question 2
2
Animating width and height is just as efficient as animating transform.
TTrueFFalse
transform and opacity are GPU-handled. width, height, top, left, etc. cause layout every frame — much slower.
Question 3
3
Which is the cleanest way to make a <div> 200px wide be a circle?
Aborder-radius: 50%Bborder-radius: 100pxCmask-image: circle()DBoth a and b work
50% or any radius ≥ half the element's size gives a circle (when the element is square). 50% is more flexible.
Question 4
4
A linear gradient from white at the top to gray at the bottom:
Alinear-gradient(white, gray)Blinear-gradient(to top, white, gray)Clinear-gradient(90deg, white, gray)Dlinear-gradient(gray, white)
The default direction is to bottom — first color at the top, last color at the bottom.
Question 5
5
For a soft drop shadow on a card, the best pick is…
Abox-shadow: 5px 5px 0 blackBbox-shadow: 0 4px 12px rgb(0 0 0 / 10%)Cborder: 4px solid grayDfilter: drop-shadow(0 0 50px black)
Small offset, soft blur, low opacity — that's the modern "subtle elevation" shadow. Sharp shadows with high opacity look dated.
Question 6
6
transition: all 200ms animates every changeable property.
TTrueFFalse
all is convenient but sometimes triggers unwanted transitions. Listing properties explicitly is safer when you know the set.
Question 7
7
For a frosted-glass effect (blur what's behind a translucent element), use…
Afilter: blur(...)Bbackdrop-filter: blur(...)Cmix-blend-mode: blurDopacity: 0.5
filter: blur blurs the element itself. backdrop-filter blurs what's behind it. The frosted-glass look is backdrop-filter.
Question 8
8
Inside an @keyframes rule, from is shorthand for ___%.
from is 0%, to is 100%. Other stops use % values between.