A two-dimensional layout system designed for creating complex rows and columns

A one-dimensional alignment system primarily used for distributing space in a single row

A legacy layout framework that relies on table-cell rendering for modern browser support

A specialized typography tool for managing vertical rhythm and baseline text alignment

What is CSS custom properties?

Defining reusable values using the --prefix syntax and accessing them with the var() function

Static variables defined in preprocessors like SCSS that are compiled into hardcoded values

A set of experimental properties that require vendor prefixes to function in modern browsers

A method for creating custom HTML tags that automatically inherit global styling rules

What is CSS transform?

Modifying an element’s visual state via rotation or scaling without affecting the DOM flow

Adjusting an element’s physical coordinates using top and left properties within the document flow

Changing the display property of an element to convert it from an inline box to a block box

A legacy filtering technique used to apply grayscale and blur effects to background images

What is CSS animation?

Creating multi-step sequences using the @keyframes rule and the animation property

Handling a single state change between two values using only the transition property

An external JavaScript library required to manipulate DOM elements in a timed sequence

A specialized property used exclusively for animating SVG paths and canvas elements

What is CSS transition?

The process of smoothly interpolating CSS property changes over a specified duration

A complex keyframe-based timeline used to cycle an element through multiple visual states

A performance optimization that forces the browser to pre-render elements before they appear

A specialized pseudo-class used to trigger styles only when an element is currently moving

What is stacking context?

The three-dimensional conceptual grouping of elements that determines their z-axis order

A property that defines the vertical spacing between block-level elements in a document

An organizational system that automatically sorts HTML elements by their appearance in the source

A rendering mode that only applies to elements using absolute or fixed positioning

What is BFC (Block Formatting Context)?

An isolated layout region where internal elements do not affect the surrounding page flow

A global styling mode that converts all inline elements into block-level containers

A specific grid-template configuration used to align items along a central baseline

A legacy browser workaround used to support transparent PNG images in older versions of IE

What is CSS containment?

An optimization that limits the scope of browser styles, layouts, and paint calculations

A layout property that forces an element to stay within the boundaries of the viewport

A method for importing external CSS files into a single, unified stylesheet container

A security feature that prevents CSS from accessing sensitive data within the document

A property that informs the browser of upcoming changes to optimize rendering performance

A mandatory requirement that must be applied to all animated elements to prevent flickering

A JavaScript event listener that triggers whenever a CSS property is modified by a script

A specialized selector used to target elements that are currently being resized by the user

A grid feature allowing nested containers to inherit the track definitions of the parent grid

A shorthand property used to create multiple small grids inside a single table cell

A rendering mode that automatically collapses empty grid tracks to save vertical space

A technique for defining local grid lines that do not interact with the primary grid system

What is aspect-ratio?

A property that sets a preferred ratio for an element, allowing it to scale proportionally

A calculation tool used to determine the pixel density of an image for retina displays

A fixed constraint that prevents an element from growing beyond its initial dimensions

A JavaScript function used to resize the browser window to match a specific video format

What is CSS painting performance?

The computational cost associated with rendering visual effects like shadows and filters

The speed at which the browser downloads and parses external image and font assets

A measurement of how quickly the browser can execute complex JavaScript layout scripts

The time it takes for the browser to apply global reset styles to the initial DOM

What is compositing in CSS?

The final step where the browser draws layers to the screen to create the full page

The process of combining multiple CSS files into a single minified production build

A method for merging different background images into a single layered container

The calculation phase where the browser determines the exact size of every HTML element

What is clip-path property?

Defining a specific region of an element to be visible while hiding the remaining area

A method for cropping the source file of an image before it is sent to the client browser

A positioning rule that prevents an element from overflowing its parent container

A tool used to detect if an element is currently intersecting with the user’s viewport

What are media queries in CSS?

Conditional rules that apply specific styles based on device characteristics and features

A library of predefined CSS classes used to create responsive layouts automatically

A set of HTML tags used to embed video and audio content with custom player controls

A database system used to store and retrieve different versions of a website’s stylesheet

What is CSS specificity?

An algorithm that determines which CSS rule is applied when multiple selectors target an element

The total number of CSS properties that are defined within a single declaration block

A performance metric that measures how quickly a browser can find a specific HTML element

A debugging tool used to identify unused CSS selectors across a large web application

What is the :scope pseudo-class?

A pseudo-class representing the elements that serve as the reference point for a selector

A global variable scope that allows CSS properties to be shared across multiple domains

A specialized selector used to target the root element of any document

A layout mode that restricts the visibility of an element to a specific screen region

What are counter properties in CSS?

Properties used to create and maintain automatic numbering systems within a document

A set of mathematical functions used to calculate the number of items in a flex container

An optimization tool that tracks the number of times an element is repainted by the browser

A method for validating that a specific number of characters have been entered into a form

What is backdrop-filter property?

Applying graphical effects such as blurring or color shifting to the area behind an element

A filter that only affects the element itself without modifying the background layers

A specialized background-image property used to create repeating gradient patterns

An accessibility feature that automatically increases the contrast of background text

What is mix-blend-mode in CSS?

Defining how an element’s content should blend with the content of its direct background

A property that merges multiple CSS files together into a single rendering layer

An alignment tool used to mix different font families within a single paragraph of text

A performance mode that reduces the complexity of gradients to improve scrolling speed

What is the filter property in CSS?

Applying visual effects like blurring, saturation, or contrast shifts to a specific element

A data-processing function used to remove unwanted items from a reactive JavaScript array

A security rule that blocks malicious scripts from being injected into the CSS document

A layout property used to filter out hidden elements from being calculated in the grid

What is fractional unit (fr) in CSS Grid?

A flexible unit that represents a portion of the available free space in a grid container

A fixed measurement unit based on the font size of the root element in the document

A percentage-based value that ignores the size of gaps between rows and columns

A measurement used in Flexbox to determine how much a flex item should shrink

What is minmax() function in CSS Grid?

A functional notation that defines a size range greater than or equal to min and less than or equal to max

A mathematical tool used to calculate the average width of all columns within a grid container

A responsive breakpoint that automatically switches between two different grid templates

A validation rule that prevents grid items from growing beyond the size of the viewport

What are named grid areas in CSS Grid?

A method for assigning names to grid sections to simplify the placement of child elements

A set of predefined identifiers used to target specific HTML5 tags like and

A CSS feature that automatically generates class names based on the position of grid items

A legacy technique used to simulate grid layouts using the float and clear properties

What is text-overflow property?

Specifying how the browser should signal that text has been clipped by its container

A property that automatically wraps long words onto a new line to prevent horizontal scrolling

An accessibility rule that forces the browser to read hidden text to screen readers

A rendering mode that reduces the font size of text until it fits within its box

What is object-fit property?

Defining how the content of a replaced element, such as an image or video, should be resized

A layout property used to align text objects within a block-level container

A CSS property used to determine the physical weight of a 3D object in a scene

A performance optimization that compresses images before they are rendered on screen

What is container queries in CSS?

A mechanism to apply styles based on the dimensions of a parent container rather than the viewport

A specialized JavaScript function used to detect the height of a specific container

A method for grouping multiple CSS files into a single production-ready container

A security feature that isolates a component’s styles so they cannot affect the rest of the page

What are CSS animation timing functions?

Functions that define the speed curve of an animation to make transitions look more natural

A set of timers used to delay the start of an animation until the page is fully loaded

A performance metric used to measure how many frames per second an animation is running

A method for synchronizing multiple animations to start at exactly the same time

What is the inset property in CSS?

A shorthand property for setting the four directional offsets of a positioned element

A specialized border style that creates a recessed or 3D inner shadow effect

A method for nesting one CSS selector inside another to reduce code duplication

A layout property used to define the internal padding of a flexbox container

What is CSS Flexbox and its main alignment properties?

A one-dimensional layout model that uses justify-content and align-items for positioning

A two-dimensional system that relies on row-gap and column-gap to maintain strict layouts

A legacy float-based framework designed for older browsers that lack modern layout support

A specialized property used to calculate the physical flex and weight of 3D animations

Quizzes

Next in Web DesignResponsive Web Design: Mobile-First & Breakpoints

Web Design Frontend

Advanced CSS: Layouts, Modern Features & Performance

Mohammad Abu Mattar20 QuestionsIntermediatePublished: 09 Mar, 2026

Markdown for AI

Advanced CSS: Layouts, Modern Features & Performance

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

Welcome to the Advanced CSS Quiz! Test your knowledge of modern CSS features, layout techniques, and performance optimization. This quiz covers CSS Grid, custom properties, animations, transforms, and more. Each question includes explanations to deepen your understanding. Good luck!

Answer key and explanations20 questions

The quiz above draws 20 questions at random from these 30, so a second attempt will not be the same run. Everything in the pool is listed here.

What is CSS Grid?
AnswerA two-dimensional layout system designed for creating complex rows and columns
What is CSS custom properties?
AnswerDefining reusable values using the --prefix syntax and accessing them with the var() function
What is CSS transform?
AnswerModifying an element’s visual state via rotation or scaling without affecting the DOM flow
What is CSS animation?
AnswerCreating multi-step sequences using the @keyframes rule and the animation property
What is CSS transition?
AnswerThe process of smoothly interpolating CSS property changes over a specified duration
What is stacking context?
AnswerThe three-dimensional conceptual grouping of elements that determines their z-axis order
What is BFC (Block Formatting Context)?
AnswerAn isolated layout region where internal elements do not affect the surrounding page flow
What is CSS containment?
AnswerAn optimization that limits the scope of browser styles, layouts, and paint calculations
What is will-change?
AnswerA property that informs the browser of upcoming changes to optimize rendering performance
What is subgrid?
AnswerA grid feature allowing nested containers to inherit the track definitions of the parent grid
What is aspect-ratio?
AnswerA property that sets a preferred ratio for an element, allowing it to scale proportionally
What is CSS painting performance?
AnswerThe computational cost associated with rendering visual effects like shadows and filters
What is compositing in CSS?
AnswerThe final step where the browser draws layers to the screen to create the full page
What is clip-path property?
AnswerDefining a specific region of an element to be visible while hiding the remaining area
What are media queries in CSS?
AnswerConditional rules that apply specific styles based on device characteristics and features
What is CSS specificity?
AnswerAn algorithm that determines which CSS rule is applied when multiple selectors target an element
What is the :scope pseudo-class?
AnswerA pseudo-class representing the elements that serve as the reference point for a selector
What are counter properties in CSS?
AnswerProperties used to create and maintain automatic numbering systems within a document
What is backdrop-filter property?
AnswerApplying graphical effects such as blurring or color shifting to the area behind an element
What is mix-blend-mode in CSS?
AnswerDefining how an element’s content should blend with the content of its direct background
What is the filter property in CSS?
AnswerApplying visual effects like blurring, saturation, or contrast shifts to a specific element
What is fractional unit (fr) in CSS Grid?
AnswerA flexible unit that represents a portion of the available free space in a grid container
What is minmax() function in CSS Grid?
AnswerA functional notation that defines a size range greater than or equal to min and less than or equal to max
What are named grid areas in CSS Grid?
AnswerA method for assigning names to grid sections to simplify the placement of child elements
What is text-overflow property?
AnswerSpecifying how the browser should signal that text has been clipped by its container
What is object-fit property?
AnswerDefining how the content of a replaced element, such as an image or video, should be resized
What is container queries in CSS?
AnswerA mechanism to apply styles based on the dimensions of a parent container rather than the viewport
What are CSS animation timing functions?
AnswerFunctions that define the speed curve of an animation to make transitions look more natural
What is the inset property in CSS?
AnswerA shorthand property for setting the four directional offsets of a positioned element
What is CSS Flexbox and its main alignment properties?
AnswerA one-dimensional layout model that uses justify-content and align-items for positioning