CSS Quiz 2025: 25 Smart CSS MCQ Questions for Learning & Interviews

Learning CSS? Let’s put your skills to the test!
Whether you’re a beginner exploring CSS or preparing for frontend interviews, this quiz is made just for you.

In this article, you’ll find 25 multiple-choice CSS questions with answers — covering everything from the basics to more advanced topics. These questions are crafted to help you practice, learn, and even prepare for tech interviews at top companies.

So, get ready to test your CSS knowledge and boost your confidence — one question at a time!

You may also read:

Why Should You Practice CSS quizz?

CSS (Cascading Style Sheets) is a key part of every website. It controls how things look — from colors and fonts to layouts and animations.

Practicing CSS MCQ questions helps you:

Learn and understand important CSS topics
Get ready for frontend developer interviews
Improve faster by solving real-world problems
Spot what you’re struggling with and fix it

No matter if you’re just starting out or working toward a developer job — this CSS quiz will help you level up your CSS skills.

Start Your CSS MCQ

CSS MCQ

1 / 25

Which of the following has the highest specificity in CSS?

A. Universal selector (*)

C. ID selector (e.g., #header)

D. Inline style attribute

B. Class selector (e.g., .btn)

2 / 25

Which pseudo-element is used to style the first letter of a block-level element?

A. ::first-line

B. ::first-letter

C. :first-child

D. ::before

3 / 25

In a flex container, which property aligns flex items along the main axis?

A. align-items

B. justify-content

C. flex-direction

D. align-content

4 / 25

What is the primary purpose of the `grid-template-areas` property in CSS Grid?

A. To set the grid column widths

B. To define named grid areas for layout

C. To control grid auto-placement

D. To create gutters between grid items

5 / 25

If a CSS rule with an `!important` declaration conflicts with an inline style without `!important`, which one will be applied?

A. The inline style

B. The rule with !important

C. They cancel each other out

D. The browser’s default style

6 / 25

Which property is used to control the speed curve of a CSS animation?

A. animation-delay

B. animation-duration

C. animation-timing-function

D. animation-iteration-count

7 / 25

Which selector correctly targets only the direct child `<li>` elements of an `<ul>`?

A. ul li

B. ul > li

C. ul + li

D. ul ~ li

8 / 25

Which of the following is the correct order of the CSS box model (from inside out)?

A. Border → Margin → Padding → Content

B. Content → Padding → Border → Margin

C. Margin → Border → Padding → Content

D. Padding → Content → Margin → Border

9 / 25

What does `z-index` control in CSS?

A. Text alignment

B. Background color

C. Layer stacking order

D. Flexbox direction

10 / 25

What does `display: none;` do to an element?

A. Makes it invisible but clickable

B. Removes it from the layout

C. Makes it transparent

D. Hides content only

11 / 25

Which selector targets all `<p>` tags inside `<div>` elements?

A. div.p

B. div p

C. div>p

D. p div

12 / 25

What will `position: absolute;` do?

A. Remove the element

B. Position it relative to its parent

C. Position it relative to the nearest positioned ancestor

D. Lock it on the screen

13 / 25

What is the default position value in CSS?

A. static

B. relative

C. fixed

D. absolute

14 / 25

Which unit is relative to the parent element's font size?

A. px

B. em

C. vh

D. rem

15 / 25

Which value of `position` keeps the element fixed relative to the browser

A. absolute

B. relative

C. sticky

D. fixed

16 / 25

What property is used to control space between elements?

A. padding

B. margin

C. border

D. width

17 / 25

What does `overflow: auto` do?

A. Hides content

B. Clips overflow without scroll

C. Adds scrollbars when needed

D. Always shows scrollbars

18 / 25

Which CSS display value allows an element to accept width and height, yet still flow inline with other elements?

A. display: inline

B. display: block

C. display: inline-block

D. display: flex

19 / 25

Assuming `box-sizing: border-box;` is applied, which of these does NOT add to the total element width?

A. Padding

B. Border

C. Margin

D. Content width

20 / 25

How can you apply styles only to screen devices using media queries?

A. @media print

B. @media screen

C. @media device

D. @screen media

21 / 25

Which of the following is a pseudo-element?

A. :hover

B. :focus

C. ::before

D. :checked

22 / 25

Which CSS property is used for animations?

A. transform

B. @keyframes

C. animation-name

D. transition

23 / 25

Which property is used to smooth the transition between states?

A. animation

B. transform

C. transition

D. ease

24 / 25

What does `inherit` do in CSS?

A. Makes property default

B. Ignores the value

C. Takes the value from the parent element

D. Makes it auto

25 / 25

What value of `display` allows an element to act as both inline and block?

A. flex

B. grid

C. inline

D. inline-block

Your score is

The average score is 42%

Imraan

I’m a Full-Stack web developer (Freelancer). I’ve a great knowledge of anything related to HTML, CSS, JS, React, Node.js, MongoDB

Why Should You Practice CSS quizz?

Start Your CSS MCQ

Which of the following has the highest specificity in CSS?

Which pseudo-element is used to style the first letter of a block-level element?

In a flex container, which property aligns flex items along the main axis?

What is the primary purpose of the grid-template-areas property in CSS Grid?

If a CSS rule with an !important declaration conflicts with an inline style without !important, which one will be applied?

Which property is used to control the speed curve of a CSS animation?

Which selector correctly targets only the direct child <li> elements of an <ul>?

Which of the following is the correct order of the CSS box model (from inside out)?

What does z-index control in CSS?

What does display: none; do to an element?

Which selector targets all <p> tags inside <div> elements?

What will position: absolute; do?