Advanced CSS Quiz
Test your advanced knowledge of modern CSS
1. Which CSS selector has the highest specificity?
a. .class
b. #id
c. inline style
d. element
Show Answer
Correct Answer:
inline style
Explanation:
Inline styles override IDs, classes, and elements.
2. CSS Grid is designed for two-dimensional layouts.
True
False
Show Answer
Correct Answer:
True
Explanation:
Grid works with rows and columns together.
3. Which property creates a stacking context?
a. overflow
b. opacity < 1
c. margin
d. padding
Show Answer
Correct Answer:
opacity < 1
Explanation:
Certain properties create a new stacking context.
4. Which unit is best for responsive typography?
a. px
b. rem
c. cm
d. pt
Show Answer
Correct Answer:
rem
Explanation:
rem scales based on root font size.
5. position: sticky behaves like relative until a scroll threshold.
True
False
Show Answer
Correct Answer:
True
Explanation:
Sticky switches to fixed after scrolling.
6. Which function dynamically clamps values?
a. calc()
b. min()
c. clamp()
d. var()
Show Answer
Correct Answer:
clamp()
Explanation:
clamp() sets min, ideal, and max values.
7. CSS variables are scoped.
True
False
Show Answer
Correct Answer:
True
Explanation:
Variables follow normal CSS scoping rules.
8. Which pseudo-class selects the last child?
a. :last
b. :last-child
c. :end
d. :child-last
Show Answer
Correct Answer:
:last-child
Explanation:
Targets the last child of a parent.
9. Will-change improves animation performance.
True
False
Show Answer
Correct Answer:
True
Explanation:
It hints the browser to optimize rendering.
10. Which layout system supports auto-placement?
a. Float
b. Grid
c. Table
d. Inline
Show Answer
Correct Answer:
Grid
Explanation:
Grid can auto-place items.
11. Which CSS function creates a responsive length between a min, preferred, and max value?
a. calc()
b. min()
c. clamp()
d. max()
Show Answer
Correct Answer:
clamp()
Explanation:
clamp() allows a value to stay between a minimum and maximum while scaling responsively.
12. Which pseudo-class selects an element when a user hovers over it?
a. :hover
b. :focus
c. :active
d. :checked
Show Answer
Correct Answer:
:hover
Explanation:
:hover targets elements during mouse hover.
13. What does the CSS property isolation: isolate do?
a. Prevents an element from affecting z-index stacking
b. Makes text unselectable
c. Clears floats inside element
d. Creates a flex container
Show Answer
Correct Answer:
Prevents an element from affecting z-index stacking
Explanation:
isolation: isolate creates a new stacking context.
14. The minmax() function is commonly used in which layout?
a. Flexbox
b. Grid
c. Inline-block
d. Table
Show Answer
Correct Answer:
Grid
Explanation:
minmax() sets minimum and maximum track sizes in CSS Grid.
15. Which property allows an element to ignore pointer events?
a. pointer-events: none
b. user-select: none
c. visibility: hidden
d. display: none
Show Answer
Correct Answer:
pointer-events: none
Explanation:
This property disables mouse interactions on the element.
16. Which pseudo-element is used to insert content before an element?
a. ::before
b. ::after
c. ::first-line
d. ::first-letter
Show Answer
Correct Answer:
::before
Explanation:
::before adds content before the element’s content.
17. CSS subgrid is currently supported in most modern browsers.
True
False
Show Answer
Correct Answer:
False
Explanation:
Subgrid has limited support; check browser compatibility.
18. Which CSS property controls the rendering order of flex items along the main axis?
a. order
b. z-index
c. flex-grow
d. align-self
Show Answer
Correct Answer:
order
Explanation:
The order property changes the visual order of flex items.
19. Which property allows smooth transitions for changing CSS properties?
a. animation
b. transition
c. transform
d. keyframes
Show Answer
Correct Answer:
transition
Explanation:
transition smooths property changes over time.
20. Which unit adapts to viewport width?
a. vw
b. vh
c. rem
d. em
Show Answer
Correct Answer:
vw
Explanation:
1vw equals 1% of the viewport width.
Submit Quiz