CSS MCQs

21 MCQs  — Web Development MCQs  (Page 1 of 3)

Practice CSS MCQs with correct answers and explanations. These questions are from the Web Development MCQs section.

Which declaration wins: an inline style="color: red", or a stylesheet rule #x { color: blue !important; }?
The !important rule (blue)
Neither; the browser default is used
Whichever comes later in the file
The inline style (red)
What is an element with position: absolute positioned relative to?
Always the viewport
Its original place in the normal flow
Always its parent element
Its nearest ancestor whose position is not static
What is the difference between display: none and visibility: hidden?
They are identical
display: none keeps its space
display: none removes the element from the layout; visibility: hidden hides it but keeps its space
visibility: hidden removes it from the layout
Why might z-index: 999 have no effect on an element?
The maximum value is 100
z-index applies only to positioned elements (and flex or grid items); a static element ignores it
z-index works only on images
It needs !important
In a flex container with flex-direction: row, what do justify-content and align-items control?
justify-content controls the vertical alignment
Both control the vertical alignment
justify-content controls the horizontal (main axis) alignment; align-items controls the vertical (cross axis) alignment
Both control the horizontal alignment
What does grid-template-columns: 1fr 2fr do?
It creates columns 1px and 2px wide
It creates two columns, with the second taking twice the free space of the first
It creates 3 equal columns
It is invalid