What is the purpose of the CSS box model?

To calculate the space taken by margin, border, padding, and content

To define the hierarchy of parent and child elements within the DOM

To organize text content into semantic sections like header and main

To validate that the CSS syntax follows the correct industrial standards

What is a CSS selector?

A pattern used to identify the HTML elements that styles apply to

A tool used to compress and optimize CSS files for faster loading

A built-in browser feature used for selecting text with a cursor

A validation method for ensuring that CSS properties are supported

What is the functional difference between margin and padding?

Padding creates space inside the border; margin creates space outside

Margin sets the thickness of the border; padding sets the font size

Padding only applies to text; margin only applies to image containers

Margin controls the vertical flow; padding controls the horizontal flow

In the CSS box model, what is the "content" area?

The innermost area where the actual text or images are displayed

The outermost area that separates the element from its neighbors

The colored boundary line that surrounds the padding of an element

The transparent area that provides space between content and border

What is a class selector in CSS, and how is it written?

A selector starting with a dot (.) targeting a class attribute

A selector starting with a hash (#) targeting a specific identifier

A selector targeting elements by their direct HTML tag name

A selector used only for styling elements inside a script tag

What is an ID selector in CSS, and how is it written?

A selector starting with a hash (#) targeting a unique element

A selector starting with a colon (:) targeting a special state

A selector using angle brackets ( ) to target hidden elements

A selector used to identify the version of the CSS specification

What does "specificity" mean in CSS?

A weight system that determines which CSS rule takes precedence

A measurement of how much time it takes for a style to be applied

The total number of CSS properties defined within a single file

The degree of accuracy used when defining colors with hex codes

What is the universal selector in CSS?

The asterisk (*) symbol used to apply styles to every element

The body tag used to set the background color of the whole page

A specialized keyword that overrides all other specific styles

The root (html) selector used to define global CSS variables

What is the color property used for in CSS?

To set the foreground color (text color) of an element

To set the background color of a container or page

To change the filter and saturation of an image file

To define the color of the border surrounding a box

What is the background-color property in CSS?

A property that sets the color behind the content of an element

A property used to set the color of text within an element

A property that applies a color filter to a background image

A property that defines the color of the browser scrollbar

What is the font-size property used for in CSS?

To determine the height and scale of text within an element

To set the thickness or boldness of the text characters

To define the spacing between individual letters in a word

To adjust the physical width and height of an image tag

What are common units used in CSS?

px (pixels), em (font-relative), rem (root-relative), and %

dpi (dots), bit (binary), fr (frames), and khz (hertz)

pt (points), pc (picas), in (inches), and ft (feet)

ms (milli), s (seconds), deg (degrees), and rad (radians)

What is the display property in CSS?

A property that defines how an element is rendered in the layout

A property used to set the opacity and transparency of an element

A property that determines the resolution of images in the browser

A property used to set the alignment of text within a block

What does display: block do?

Forces an element to take the full width and start on a new line

Places an element on the same line as its neighboring elements

Completely removes an element from the page and the DOM

Centers an element horizontally within its containing parent

What does display: inline do?

Allows an element to flow with text without creating a new line

Forces an element to follow the width and height of its parent

Prevents any other elements from appearing on the same line

Automatically hides an element when the screen size is reduced

What does display: inline-block do?

Allows elements to sit side-by-side while respecting width and height

Forces an element to be invisible while still occupying space

Converts an element into a flex container with row orientation

Stretches an element to be exactly half the width of its parent

What is the purpose of the padding property in CSS?

To create space between the element content and its border

To define the thickness of the line surrounding the element

To set the distance between the borders of two adjacent boxes

To align the text content to the center of the available space

What is the border property used for in CSS?

To add a decorative or structural line around an element

To create a shadow effect that glows around the element

To ensure that text does not overflow out of its container

To set the transparency level of the background color

What is the text-align property used for?

To control the horizontal alignment of text within a block

To control the vertical positioning of text inside a table cell

To change the spacing between lines of text in a paragraph

To transform text into all uppercase or all lowercase letters

What does the float property do in CSS?

Pushes an element to one side and allows text to wrap around it

Causes an element to stay fixed at the top of the browser window

Allows an element to be dragged and moved around by the user

Creates a 3D effect where the element appears to hover over others

What is a pseudo-class in CSS?

A keyword added to a selector that specifies a special state

A fake class used as a placeholder during the development phase

A method for selecting the parent of a currently targeted element

A class that is automatically generated by JavaScript libraries

What is a pseudo-element in CSS?

A keyword used to style specific parts of an element, like ::before

An element that is hidden from screen readers for accessibility

A custom HTML tag created by the developer using Web Components

A selector that targets elements based on their current visibility

What is the difference between position: static and relative?

Static is the default; relative allows offsets without breaking flow

Static allows for z-index; relative ignores all stacking orders

Static removes elements from flow; relative keeps them in flow

Static is used for mobile; relative is used for desktop layouts

What does position: absolute do?

Positions an element relative to its nearest positioned ancestor

Pins an element to a fixed location on the screen while scrolling

Centers an element automatically within the center of the body

Forces an element to be at the very bottom of the stacking order

What does z-index do in CSS?

Determines the stack level of elements along the vertical Z-axis

Changes the magnification level of the text and image content

Sets the width of an element based on the depth of the screen

Determines the transparency of the background color layer

What is flexbox in CSS?

A layout model designed for distributing space among items

A tool used for creating complex 3D animations and transitions

A framework for building mobile applications using only HTML

A method for compressing images to make websites load faster

What does justify-content do in flexbox?

Aligns items along the main axis (usually horizontally)

Aligns items along the cross axis (usually vertically)

Determines if flex items should wrap onto multiple new lines

Sets the specific width for every child element in the container

What does align-items do in flexbox?

Aligns items along the cross axis (usually vertically)

Aligns items along the main axis (usually horizontally)

Controls the order in which items appear within the container

Sets the background color for all items within the flexbox

What is the difference between CSS reset and CSS normalize?

Reset clears all defaults; normalize makes them consistent

Reset is for mobile; normalize is used for desktop browsers

Reset speeds up the site; normalize adds extra security features

Reset only affects fonts; normalize affects the entire layout

Quizzes

CSS Fundamentals: Selectors, Box Model & Styling

Next in CSSResponsive Web Design: Mobile-First & Breakpoints

CSS Frontend Quizzes

CSS Fundamentals: Selectors, Box Model & Styling

Mohammad Abu Mattar20 QuestionsBeginnerPublished: 27 Feb, 2026

Welcome to the CSS Fundamentals quiz! This quiz will test your knowledge of CSS basics, including selectors, the box model, properties, and layout techniques. Each question is designed to reinforce key concepts and help you build a strong foundation in CSS. Good luck!

CSS Fundamentals: Selectors, Box Model & Styling

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

HTML Semantics & Web Accessibility

Welcome to the HTML Semantics & Accessibility Quiz! This quiz will test your knowledge of semantic HTML elements and web accessibility best practices. Each question has a hint to help you out, and you

#Html #Html semantics #Accessibility+11 tags

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

TypeScript: Typed JavaScript Fundamentals

Welcome to the TypeScript Basics Quiz! This quiz is designed to test your understanding of fundamental TypeScript concepts, static typing, and type-safe programming best practices. Each question is mu

#TypeScript #Static Typing #Interfaces+6 tags

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

GraphQL Fundamentals: Queries, Mutations & Schema Design

Welcome to the GraphQL Basics Quiz! Mastering GraphQL is essential for building efficient, flexible APIs that empower clients to request exactly what they need. This quiz will test your understanding

#Graphql #Graphql fundamentals #Api development+11 tags

React Fundamentals: Components, Hooks & State Management

Welcome to the React Fundamentals Quiz! This quiz will test your knowledge of core React concepts, including components, JSX, hooks, state management, props, and event handling. Whether you're new to

#React #Components #Hooks+2 tags

6 related posts