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 of the following has the highest specificity?

A) #myID

B) .myClass p

C) body div p

D) .myClass #myID

2 / 30

2. Which of the following is not a valid CSS color value?

A) rgb(255, 0, 0)

B) red

C) #FF0000

D) 100% opacity

3 / 30

3. What does the following media query target: @media (max-height: 600px)?

A) Viewports with a height greater than or equal to 600 pixels

B) Viewports with a width less than or equal to 600 pixels

C) Viewports with a width greater than or equal to 600 pixels

D) Viewports with a height less than or equal to 600 pixels

4 / 30

4. What is the specificity of the following selector: body .container #content?

A) 110

B) 101

C) 111

D) 100

5 / 30

5. Which selector has higher specificity: .content or div.content?

A) .content

B) div.content

C) Cannot be determined

D) Both have the same specificity

6 / 30

6. Which of the following is NOT a common technique for achieving cross-browser compatibility in CSS?

A) Writing browser-specific CSS files

B) Using vendor prefixes

C) Implementing polyfills

D) Utilizing CSS resets

7 / 30

7. Which CSS property is used to control the order of the elements in the document flow?

A) z-index

B) order

C) float

D) position

8 / 30

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

A) grid-area

B) item-position

C) grid-placement

D) place-item

9 / 30

9. What is the purpose of the pointer media feature?

A) It targets devices with specific screen widths

B) It targets devices with specific aspect ratios

C) It targets devices with specific pointing devices, such as a mouse or touchscreen

D) It targets devices with specific screen resolutions

10 / 30

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

A) row-reverse

B) row

C) column

D) column-reverse

11 / 30

11. Which CSS property is used to create a shadow effect for text?

A) box-shadow

B) text-shadow

C) text-effect

D) shadow

12 / 30

12. What is the primary purpose of media queries in CSS?

A) To define the font family used in a webpage

B) To specify the color scheme of a website

C) To create animations for web elements

D) To apply different styles based on the device characteristics

13 / 30

13. Which symbol is used for the universal selector in CSS?

A) ^

B) $

C) *

D) %

14 / 30

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

A) Autoprefixer

B) CSS Minifier

C) CSS Validator

D) CSS Lint

15 / 30

15. How can you apply CSS styles to elements based on user interaction, such as hovering over them?

A) All of the above

B) :active selector

C) :focus selector

D) :hover selector

16 / 30

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

A) The ability of a flex item to shrink

B) The ability of a flex item to grow

C) The initial size of a flex item

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

17 / 30

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

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

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

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

D) @media (resolution: 2dppx)

18 / 30

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

A) rounded-corners

B) border-style

C) border-radius

D) corner-radius

19 / 30

19. Which CSS property is commonly used to apply responsive design principles?

A) width: 100%;

B) float: left;

C) position: absolute;

D) display: flex;

20 / 30

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

A) visibility

B) transparent

C) alpha

D) opacity

21 / 30

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

A) .myID { ... }

B) ID: myID { ... }

C) #myID { ... }

D) [myID] { ... }

22 / 30

22. Why are vendor prefixes discouraged for production code?

A) They increase the size of CSS files

B) They are not recognized by any browsers

C) They may cause compatibility issues with future browser versions

D) They slow down the rendering of web pages

23 / 30

23. Which CSS3 property is used to create drop shadows?

A) box-shadow

B) shadow-color

C) text-shadow

D) drop-shadow

24 / 30

24. Which CSS3 property is used to specify the order of flexible items in a flex container?

A) justify-content

B) flex-wrap

C) order

D) flex-direction

25 / 30

25. What does the term 'Cascading' refer to in CSS?

A) Applying styles from parent to child elements

B) Applying styles from top to bottom

C) Applying styles based on specificity

D) Applying styles from child to parent elements

26 / 30

26. Which CSS technique is commonly used to adjust font sizes based on the viewport size?

A) line-height

B) font-family

C) font-weight

D) font-size

27 / 30

27. Which of the following selectors has the least specificity?

A) ID selectors

B) Element selectors

C) Class selectors

D) Universal selectors

28 / 30

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

A) margin

B) padding

C) spacing

D) border-spacing

29 / 30

29. What is the CSS specificity value of an inline style?

A) 1000

B) 0

C) 1

D) 10

30 / 30

30. Which CSS3 feature is used to apply gradients to elements?

A) gradient-style

B) gradient-color

C) linear-gradient

D) color-gradient

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes SQL Quiz Test Online

JSON Quiz Test Online (30 random Questions)

Angular Quiz Test Online (30 random Questions)

HTML Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Docker Quiz Test Online (30 random Questions)

Related