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

Next in CSSResponsive Web Design: Mobile-First & Breakpoints

CSS Frontend Quizzes

CSS Fundamentals: Selectors, Box Model & Styling

Mohammad Abu Mattar20 QuestionsBeginnerPublished: 27 Feb, 2026

Markdown for AI

CSS Fundamentals: Selectors, Box Model & Styling

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

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!

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 does CSS stand for?
AnswerCascading Style Sheets
What is the purpose of the CSS box model?
AnswerTo calculate the space taken by margin, border, padding, and content
What is a CSS selector?
AnswerA pattern used to identify the HTML elements that styles apply to
What is the functional difference between margin and padding?
AnswerPadding creates space inside the border; margin creates space outside
In the CSS box model, what is the "content" area?
AnswerThe innermost area where the actual text or images are displayed
What is a class selector in CSS, and how is it written?
AnswerA selector starting with a dot (.) targeting a class attribute
What is an ID selector in CSS, and how is it written?
AnswerA selector starting with a hash (#) targeting a unique element
What does "specificity" mean in CSS?
AnswerA weight system that determines which CSS rule takes precedence
What is the universal selector in CSS?
AnswerThe asterisk (*) symbol used to apply styles to every element
What is the color property used for in CSS?
AnswerTo set the foreground color (text color) of an element
What is the background-color property in CSS?
AnswerA property that sets the color behind the content of an element
What is the font-size property used for in CSS?
AnswerTo determine the height and scale of text within an element
What are common units used in CSS?
Answerpx (pixels), em (font-relative), rem (root-relative), and %
What is the display property in CSS?
AnswerA property that defines how an element is rendered in the layout
What does display: block do?
AnswerForces an element to take the full width and start on a new line
What does display: inline do?
AnswerAllows an element to flow with text without creating a new line
What does display: inline-block do?
AnswerAllows elements to sit side-by-side while respecting width and height
What is the purpose of the padding property in CSS?
AnswerTo create space between the element content and its border
What is the border property used for in CSS?
AnswerTo add a decorative or structural line around an element
What is the text-align property used for?
AnswerTo control the horizontal alignment of text within a block
What does the float property do in CSS?
AnswerPushes an element to one side and allows text to wrap around it
What is a pseudo-class in CSS?
AnswerA keyword added to a selector that specifies a special state
What is a pseudo-element in CSS?
AnswerA keyword used to style specific parts of an element, like ::before
What is the difference between position: static and relative?
AnswerStatic is the default; relative allows offsets without breaking flow
What does position: absolute do?
AnswerPositions an element relative to its nearest positioned ancestor
What does z-index do in CSS?
AnswerDetermines the stack level of elements along the vertical Z-axis
What is flexbox in CSS?
AnswerA layout model designed for distributing space among items
What does justify-content do in flexbox?
AnswerAligns items along the main axis (usually horizontally)
What does align-items do in flexbox?
AnswerAligns items along the cross axis (usually vertically)
What is the difference between CSS reset and CSS normalize?
AnswerReset clears all defaults; normalize makes them consistent