CSS Quiz Test Online (30 random Questions) 2026

Take this CSS Quiz Test Online and challenge your knowledge with 30 carefully crafted questions. Whether you’re a beginner or an experienced developer, this quiz will help you assess your understanding of CSS fundamentals, styling techniques, selectors, properties, layouts, and advanced concepts.

0 votes, 0 avg

You have 30 minutes to complete the quiz. The timer will start when you click the 'Start Quiz' button. Please ensure you are ready before beginning.

Time is up! Your quiz has ended. Your responses have been submitted automatically.

30 Minutes CSS Quiz Test Online

Test your CSS knowledge with this 30-minute quiz! Covering fundamental to advanced concepts, this quiz features 30 multiple-choice questions that will challenge your understanding of selectors, properties, layout techniques, animations, and responsive design. Perfect for interview preparation and skill enhancement.

1 / 30

1. Which CSS property is used to change the background color of an element?

A) background

B) background-color

C) text-color

D) color

2 / 30

2. Which of the following properties is used to align flex items along the main axis?

A) justify-content

B) align-items

C) align-content

D) justify-items

3 / 30

3. How can you select all elements except the last one in a list using CSS?

A) :not(:last-child)

B) :last-of-type

C) :not(:last-of-type)

D) :last-child

4 / 30

4. Which CSS selector has the highest specificity?

A) ID selector

B) Class selector

C) Tag selector

D) Universal selector

5 / 30

5. What is the purpose of the color media feature?

A) It targets devices with specific screen resolutions

B) It targets devices with specific color capabilities

C) It targets devices with specific screen widths

D) It targets devices with specific aspect ratios

6 / 30

6. What is the specificity value of the following selector: div#content .paragraph?

A) 111

B) 100

C) 101

D) 110

7 / 30

7. Which CSS technique is commonly used to hide elements on smaller screens in responsive design?

A) visibility: hidden;

B) position: absolute;

C) opacity: 0;

D) display: none;

8 / 30

8. What is the purpose of the :not() pseudo-class in CSS?

A) To select elements based on their attributes

B) To exclude specific elements from being selected

C) To select elements that are the first child of their parent

D) To select elements based on their position in the DOM

9 / 30

9. In Flexbox, what is the default value of the flex-direction property?

A) row

B) column-reverse

C) column

D) row-reverse

10 / 30

10. Which vendor prefix is associated with Safari?

A) -webkit-

B) -moz-

C) -o-

D) -ms-

11 / 30

11. Which CSS property is used to set the font size of an element?

A) font-size

B) font

C) size

D) text-size

12 / 30

12. Which of the following is the correct CSS syntax to apply a style to an ID?

A) #myID { ... }

B) .myID { ... }

C) [myID] { ... }

D) ID: myID { ... }

13 / 30

13. Which CSS3 property is used to specify the opacity of an element?

A) transparent

B) alpha

C) visibility

D) opacity

14 / 30

14. Which tool is commonly used to automate the generation of vendor prefixes in CSS?

A) CSS Validator

B) Autoprefixer

C) CSS Minifier

D) CSS Lint

15 / 30

15. In Flexbox, what does the flex-grow property determine?

A) The initial size of a flex item

B) The ability of a flex item to shrink

C) The ability of a flex item to grow

D) The alignment of a flex item along the cross-axis

16 / 30

16. Which CSS property is used to create rounded corners?

A) border-radius

B) border-style

C) corner-radius

D) rounded-corners

17 / 30

17. Which CSS property is used to set the width of an element?

A) dimension

B) size

C) width

D) length

18 / 30

18. What does specificity determine in CSS?

A) The order of application of styles

B) The importance of styles

C) The strength of a selector's style rules

D) The uniqueness of a selector

19 / 30

19. Which media query targets devices with high-resolution screens, such as Retina displays?

A) @media (resolution: 2dppx)

B) @media (max-resolution: 2dppx)

C) @media (device-resolution: 2dppx)

D) @media (min-resolution: 2dppx)

20 / 30

20. What is the purpose of the -webkit- prefix in CSS?

A) Targeting Microsoft Edge browser

B) Targeting Safari and Chrome browsers

C) Targeting Firefox browser

D) Targeting Opera browser

21 / 30

21. Which CSS3 feature is used to create responsive and flexible layouts?

A) layout

B) flexbox

C) flow

D) grid

22 / 30

22. How can you select elements that have a specific attribute with a value starting with a certain string?

A) [attribute^="value"]

B) [attribute$="value"]

C) [attribute*="value"]

D) [attribute~="value"]

23 / 30

23. Which CSS property is used to create space between the border and the content of an element?

A) border-spacing

B) margin

C) spacing

D) padding

24 / 30

24. Which CSS property is used to set the font weight?

A) font-style

B) weight

C) font-weight

D) font-bold

25 / 30

25. Which CSS property is used to control the spacing between lines of text?

A) line-height

B) spacing

C) text-spacing

D) line-spacing

26 / 30

26. Which CSS property is used to align text within an element?

A) text-style

B) text-align

C) align

D) align-text

27 / 30

27. Which CSS selector has the highest specificity?

A) Element selectors

B) Universal selectors

C) Class selectors

D) ID selectors

28 / 30

28. What does the following media query target: @media (max-width: 768px)?

A) Viewports with a width greater than or equal to 768 pixels

B) Viewports with a height less than or equal to 768 pixels

C) Viewports with a width less than or equal to 768 pixels

D) Viewports with a height greater than or equal to 768 pixels

29 / 30

29. In Flexbox, what is the purpose of the flex-shrink property?

A) To determine how much a flex item can grow

B) To determine how much a flex item can shrink

C) To set the initial size of a flex item

D) To align flex items along the cross-axis

30 / 30

30. Which CSS property is used to place a grid item within a grid area?

A) grid-area

B) item-position

C) place-item

D) grid-placement

Your score is

The average score is 43%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

SQL Quiz Test Online (30 random Questions)

MongoDB Quiz Test Online (30 random Questions)

Docker Quiz Test Online (30 random Questions)

10 Minutes Bootstrap Quiz Test Online

Angular Quiz Test Online (30 random Questions)

HTML Quiz Test Online

Related