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

Advanced CSS: Layouts, Modern Features & Performance

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

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!

Advanced CSS: Layouts, Modern Features & Performance

Test your knowledge up to 20 randomized questions

Quiz Configuration

Enterto start

You might also enjoy

Check out some of our other posts on similar topics

Responsive Web Design: Mobile-First & Breakpoints

Welcome to the Responsive Design Quiz! In today's mobile-first world, building websites that look great and function well on any device is essential. This quiz will test your knowledge of responsive d

#Responsive Design #Mobile First #Media Queries+2 tags

Advanced Frontend Patterns: State Management & Performance

Master advanced frontend architecture: state management (Redux, Zustand), performance optimization, code splitting, lazy loading, and responsive design patterns.

#Frontend #Performance #Architecture

Async JavaScript: Promises, Async/Await, Event Loop

Welcome to the Async JavaScript quiz! Test your knowledge of Promises, async/await, the event loop, and advanced concurrency patterns. Each question has a hint and detailed explanations for all option

#Async #JavaScript #Promises

Astro: Building Fast Web Experiences

Welcome to the Astro Fundamentals Quiz! Test your knowledge of Astro's core concepts: island architecture, server components, client directives, content collections, integrations, layouts, routing, dy

#Astro #Static #Performance

JavaScript: Language Fundamentals & Modern Features

Welcome to the JavaScript Basics Quiz! This quiz is designed to test your understanding of fundamental JavaScript concepts, syntax, and modern programming best practices. Each question is multiple-cho

#JavaScript #ES6 #Arrow Functions+6 tags

Vue.js Fundamentals: Reactive Components & Templates

Welcome to the Vue.js Basics Quiz! Vue.js is a progressive JavaScript framework for building user interfaces. Whether you're creating a simple interactive widget or a complex single-page application,

#Vue.js #Components #Reactive+1 tags

6 related posts