(Layout & Images) Flashcards
7 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning โ missed cards come back until you master them.
Read the first 7 (Layout & Images) flashcards as text
Which display value creates an inline-level flex container?
Answer: inline-flex
display: inline-flex creates a flex container that flows inline with surrounding content.
What does the 'aspect-ratio' property do?
Answer: Sets a preferred width-to-height ratio for an element
aspect-ratio defines the ratio between an element's width and height.
Which property and value enable a sticky header that stays at the top when scrolling?
Answer: position: sticky; top: 0;
position: sticky with top: 0 keeps the element fixed once it reaches the top during scroll.
Which image format supports transparency and is best for logos with sharp edges?
Answer: PNG
PNG supports lossless compression and an alpha channel for transparency.
What does 'align-items: center' do in a flex row?
Answer: Centers items along the cross (vertical) axis
In a flex row, align-items: center aligns items vertically on the cross axis.
Which property in Grid lets an item span multiple columns?
Answer: grid-column: span 2
grid-column: span 2 makes the item occupy two column tracks.
Which modern image format offers smaller file sizes than JPEG with similar quality?
Answer: WebP
WebP provides superior compression for both lossy and lossless web images.