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 property is used in Flexbox to align flex items along the cross-axis?

A) align-items

B) justify-items

C) align-content

D) justify-content

2 / 30

2. Which CSS3 feature is used to create 2D and 3D transformations?

A) translate

B) transform

C) rotate

D) transition

3 / 30

3. Which CSS3 feature is used to apply different styles to an element based on its state, such as hover or focus?

A) Flexbox

B) Transitions

C) Animations

D) Pseudo-classes

4 / 30

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

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

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

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

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

5 / 30

5. Which vendor prefix is associated with Microsoft Internet Explorer?

A) -moz-

B) -ms-

C) -o-

D) -webkit-

6 / 30

6. Which of the following media query syntaxes is incorrect?

A) @media (min-device-width: 320px) and (max-device-width: 480px) { ... }

B) @media (min-height: 600px), (max-height: 800px) { ... }

C) @media (min-width: 768px) and (max-width: 1024px) { ... }

D) @media (orientation: portrait), (orientation: landscape) { ... }

7 / 30

7. Which CSS property is commonly used to create a responsive navigation menu?

A) display: flex;

B) float: left;

C) position: absolute;

D) text-align: center;

8 / 30

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

A) Implementing polyfills

B) Utilizing CSS resets

C) Writing browser-specific CSS files

D) Using vendor prefixes

9 / 30

9. What does specificity determine in CSS?

A) The strength of a selector's style rules

B) The importance of styles

C) The order of application of styles

D) The uniqueness of a selector

10 / 30

10. In Grid, what does the grid-column property define?

A) The size of grid rows

B) The starting column line and ending column line of a grid item

C) The starting row line and ending row line of a grid item

D) The size of grid columns

11 / 30

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

A) $

B) %

C) *

D) ^

12 / 30

12. What does the place-content property do in Grid?

A) It controls the placement of a grid item within its grid area

B) It sets the size of grid columns and rows

C) It combines the properties justify-content and align-content in one declaration

D) It aligns individual grid items along the column axis

13 / 30

13. Which CSS3 feature is used to apply a shadow effect to elements?

A) border-shadow

B) element-shadow

C) text-shadow

D) box-shadow

14 / 30

14. Which media query syntax targets devices with a screen width between 600px and 900px?

A) @media (600px <= width <= 900px) { ... }

B) @media (min-width: 600px) and (max-width: 900px) { ... }

C) @media (min-width: 600px, max-width: 900px) { ... }

D) @media (width >= 600px && width <= 900px) { ... }

15 / 30

15. What is the specificity value of the selector: body p#content?

A) 010

B) 101

C) 102

D) 100

16 / 30

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

A) flow

B) flexbox

C) layout

D) grid

17 / 30

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

A) item-position

B) place-item

C) grid-placement

D) grid-area

18 / 30

18. Which CSS selector targets elements that are the nth child of their parent?

A) :nth-of-type

B) :nth-child

C) :child-nth

D) :child-of

19 / 30

19. Which CSS3 feature is used to create a responsive design for web pages?

A) animations

B) media queries

C) grids

D) transitions

20 / 30

20. What does CSS3 introduce compared to previous versions of CSS?

A) Better browser compatibility

B) More advanced layout techniques

C) New features and enhancements

D) Faster rendering engine

21 / 30

21. Which of the following has the highest specificity?

A) body div p

B) #myID

C) .myClass #myID

D) .myClass p

22 / 30

22. What does CSS stand for?

A) Creative Style Sheets

B) Colorful Style Sheets

C) Computer Style Sheets

D) Cascading Style Sheets

23 / 30

23. Which CSS property is used to specify the type of cursor to be displayed when hovering over an element?

A) pointer

B) hover

C) cursor

D) mouse

24 / 30

24. What is the specificity of the following CSS rule: #header .nav li.active?

A) 112

B) 121

C) 1100

D) 111

25 / 30

25. What is the specificity of the following selector: div.container #content p.highlight span?

A) 111

B) 121

C) 1003

D) 123

26 / 30

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

A) font-style

B) font-weight

C) font-bold

D) weight

27 / 30

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

A) linear-gradient

B) color-gradient

C) gradient-color

D) gradient-style

28 / 30

28. Which CSS3 feature is used to create text effects like shadows and outlines?

A) text-style

B) text-outline

C) text-effect

D) text-shadow

29 / 30

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

A) :last-child

B) :not(:last-child)

C) :last-of-type

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

30 / 30

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

A) line-height

B) text-spacing

C) spacing

D) line-spacing

Your score is

The average score is 41%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Angular Quiz Test Online (30 random Questions)

HTML Quiz Test Online

10 Minutes MongoDB Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes JavaScript Quiz Test Online

10 Minutes Angular Quiz Test Online

Related