CSS Quiz (Advanced) - All Questions

This CSS Advanced Quiz is designed for experienced frontend developers who want to validate deep CSS knowledge. It focuses on advanced layouts, performance, browser behavior, accessibility, and real-world interview-level CSS challenges.

Question 1: What creates a new stacking context in CSS?

position: relative
z-index: auto
opacity less than 1
float: left

Explanation: An element with opacity less than 1 creates a new stacking context.

Question 2: Which CSS property is most GPU-optimized for animations?

margin
top
left
transform

Explanation: transform animations are GPU-accelerated and performant.

Question 3: Which scenario triggers layout reflow?

Changing color
Changing opacity
Changing transform
Changing width

Explanation: Changing width affects layout and triggers reflow.

Question 4: Which property prevents layout shifts during font loading?

font-style
font-display
text-rendering
font-weight

Explanation: font-display controls font loading behavior.

Question 5: Which CSS function clamps a value within a range?

minmax()
range()
clamp()
fit()

Explanation: clamp() restricts values between min and max.

Question 6: Which CSS Grid function creates flexible tracks?

repeat()
minmax()
auto-fit()
fr()

Explanation: minmax() defines flexible grid track sizes.

Question 7: What does contain: layout do?

Hides overflow
Creates new stacking context
Limits layout recalculation scope
Fixes layout position

Explanation: contain: layout improves performance by isolating layout.

Question 8: Which pseudo-class targets elements with no children?

:empty
:blank
:only-child
:root

Explanation: :empty selects elements with no child nodes.

Question 9: Which selector has the highest specificity?

Class selector
Type selector
ID selector
Attribute selector

Explanation: ID selectors have higher specificity.

Question 10: Which CSS feature isolates styles to a subtree?

isolation
contain
scoped styles
:root

Explanation: contain isolates rendering and layout effects.

Question 11: Which value of will-change should be used cautiously?

auto
transform
opacity
all

Explanation: will-change: all can hurt performance if overused.

Question 12: Which property defines logical margin inline start?

margin-left
margin-inline-start
margin-start
padding-inline

Explanation: margin-inline-start supports logical layouts.

Question 13: Which unit adapts to container size instead of viewport?

Explanation: Container query units adapt to container size.

Question 14: Which CSS feature enables container-based responsiveness?

Media queries
Viewport units
Container queries
Flexbox

Explanation: Container queries respond to container size.

Question 15: Which property improves scroll performance?

scroll-behavior
will-change
contain
overscroll-behavior

Explanation: overscroll-behavior controls scroll chaining.

Question 16: Which selector matches elements based on their children?

:has()
:where()
:is()
:not()

Explanation: :has() selects parent elements conditionally.

Question 17: Which selector adds zero specificity?

:is()
:not()
:where()
:has()

Explanation: :where() adds no specificity.

Question 18: Which CSS property controls scroll snapping?

scroll-align
scroll-snap-type
snap-behavior
scroll-lock

Explanation: scroll-snap-type enables snap behavior.

Question 19: Which value forces immediate snap alignment?

mandatory
proximity
auto
force

Explanation: mandatory forces snap alignment.

Question 20: Which property defines snap position?

scroll-position
scroll-snap-align
snap-align
scroll-align

Explanation: scroll-snap-align defines snap alignment.

Question 21: Which CSS feature avoids cumulative layout shift?

aspect-ratio
object-fit
contain
overflow

Explanation: aspect-ratio reserves layout space.

Question 22: Which property preserves 3D transformations?

transform-style
perspective
backface-visibility
translateZ

Explanation: transform-style: preserve-3d keeps 3D children.

Question 23: Which property controls 3D depth?

z-index
perspective
translateZ
depth

Explanation: perspective defines 3D depth.

Question 24: Which value hides the backside of a 3D element?

visibility: hidden
display: none
backface-visibility: hidden
opacity: 0

Explanation: backface-visibility hides reversed faces.

Question 25: Which property enables subpixel font rendering hints?

font-smooth
text-rendering
font-display
font-feature-settings

Explanation: text-rendering influences glyph rendering.

Question 26: Which CSS rule loads fonts conditionally?

@font-face
@media
@supports
@import

Explanation: @supports applies styles conditionally.

Question 27: Which CSS function blends colors dynamically?

rgba()
hsl()
color-mix()
mix()

Explanation: color-mix() blends multiple colors.

Question 28: Which property isolates blend modes?

mix-blend-mode
background-blend-mode
isolation
contain

Explanation: isolation prevents blending outside the element.

Question 29: Which value allows blending with background?

multiply
overlay
screen
all

Explanation: multiply blends colors by multiplication.

Question 30: Which property creates a clipping path?

mask
clip-path
overflow
shape-outside

Explanation: clip-path defines a clipping region.

Question 31: Which CSS feature wraps text around shapes?

clip-path
mask
shape-outside
float

Explanation: shape-outside defines text flow shapes.

Question 32: Which property optimizes offscreen rendering?

content-visibility
contain
display
visibility

Explanation: content-visibility skips offscreen rendering.

Question 33: Which value auto-skips rendering offscreen content?

hidden
auto
contain
skip

Explanation: auto enables browser-driven optimization.

Question 34: Which selector matches focus via keyboard only?

:focus
:focus-visible
:active
:hover

Explanation: :focus-visible targets keyboard focus.

Question 35: Which property disables scroll chaining?

scroll-behavior
overscroll-behavior
scroll-snap-type
contain

Explanation: overscroll-behavior controls scroll propagation.

Question 36: Which feature allows CSS-based calculations?

var()
calc()
clamp()
minmax()

Explanation: calc() performs runtime calculations.

Question 37: Which property defines logical block size?

height
block-size
inline-size
min-height

Explanation: block-size adapts to writing modes.

Question 38: Which property adapts layout to writing mode?

direction
writing-mode
text-orientation
unicode-bidi

Explanation: writing-mode changes layout flow direction.

Question 39: Which selector reduces specificity conflicts?

!important
:where()
:not()
:has()

Explanation: :where() keeps specificity at zero.

Question 40: Which property controls text justification algorithm?

text-align
text-justify
word-spacing
letter-spacing

Explanation: text-justify controls justification behavior.

Question 41: Which CSS feature improves accessibility for reduced motion?

@media prefers-color-scheme
@media prefers-reduced-motion
@supports motion
@media motion

Explanation: prefers-reduced-motion respects user preferences.

Question 42: Which property enables smooth scrolling?

scroll-smooth
scroll-behavior
scroll-type
smooth-scroll

Explanation: scroll-behavior controls scroll animation.

Question 43: Which feature supports dark mode styling?

@supports
@media prefers-color-scheme
@theme
@color-scheme

Explanation: prefers-color-scheme detects theme preference.

Question 44: Which CSS property hints resource loading priority?

importance
fetchpriority
priority
preload

Explanation: fetchpriority hints browser loading priority.

Back to programming Quizzes

CSS Quiz (Advanced)

Questions

~10

Minutes

Min Limit