Sign in Sign up

CSS MCQ Test

20 random CSS multiple-choice questions with answers: selectors, specificity, the box model, colours, units, Flexbox, Grid, positioning and responsive design.

  • 20 random questions
  • 20 minutes
  • 60 in the question bank

No sign-up needed. Answers and explanations are shown at the end.

About this test

CSS questions look easy until two rules fight each other. This test focuses on what decides the result: specificity, the box model, units, display and positioning.

You will also get Flexbox, Grid and media-query questions, the topics interviewers use to check whether you can build a real layout.

Each attempt picks new questions at random from the question bank. You can go back and change answers until you finish or the timer runs out. At the end you see your score, the right answer and a short explanation for every question, and the lessons to revise for the ones you missed.

Topics covered

  1. CSS Introduction
  2. How to Add CSS
  3. CSS Selectors
  4. CSS Colors
  5. CSS Backgrounds
  6. CSS Borders
  7. CSS Margin and Padding
  8. CSS Box Model
  9. CSS Width and Height
  10. CSS Text and Fonts
  11. CSS Display
  12. CSS Position
  13. CSS Flexbox Basics
  14. CSS Flexbox Layouts
  15. CSS Grid Basics
  16. CSS Grid Layouts
  17. CSS Responsive Design and Media Queries
  18. CSS Transitions and Transforms
  19. CSS Variables
  20. CSS Project: Style Your Profile Page

Sample questions with answers

1. In p { color: blue; }, what is p?

  1. The selector
  2. The value
  3. The property
Show answer

A. The selector — color is the property, blue the value.

2. What is the normal way to add CSS to a website?

  1. A <css> tag
  2. Inline style attributes everywhere
  3. An external stylesheet linked with <link rel="stylesheet">
Show answer

C. An external stylesheet linked with <link rel="stylesheet"> — One file styles every page.

3. Which selector matches elements with class="card"?

  1. card
  2. .card
  3. #card
Show answer

B. .card — # is for ids.

4. Which is a valid hex colour?

  1. #0a7d4f
  2. 0a7d4f#
  3. #zz1122
Show answer

A. #0a7d4f — Hex uses 0-9 and a-f.

5. Which background-size fills the box completely, cropping if needed?

  1. contain
  2. auto
  3. cover
Show answer

C. cover — contain shows the whole image without cropping.

6. Which makes a perfect circle from a square?

  1. shape: circle
  2. border-radius: 50%
  3. border-radius: circle
Show answer

B. border-radius: 50% — Works when width equals height.

7. Padding vs margin?

  1. They're the same
  2. Padding is inside the border; margin is outside
  3. Margin is inside
Show answer

B. Padding is inside the border; margin is outside — Padding gets the background colour.

8. With default box-sizing, a 300px-wide box with 20px padding and 5px border is how wide?

  1. 300px
  2. 325px
  3. 350px
Show answer

C. 350px — Content-box adds padding and border to the width.

9. Which is best for responsive images and containers?

  1. max-width: 100%
  2. height: 100%
  3. width: 1200px
Show answer

A. max-width: 100% — They shrink on small screens but don't grow too large.

10. Why list fallbacks in font-family?

  1. If the first font is unavailable, the next one is used
  2. For SEO
  3. To use all fonts at once
Show answer

A. If the first font is unavailable, the next one is used — End with a generic family like sans-serif.