CSS Quiz Test Online (30 Questions) 2025

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 45 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.

45 Minutes CSS Quiz Test Online

Test your CSS knowledge with this 45-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 CSS3 property is used to specify the order of flexible items in a flex container?

A) justify-content

B) order

C) flex-direction

D) flex-wrap

2 / 30

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

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

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

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

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

3 / 30

3. Why are vendor prefixes discouraged for production code?

A) They are not recognized by any browsers

B) They increase the size of CSS files

C) They slow down the rendering of web pages

D) They may cause compatibility issues with future browser versions

4 / 30

4. What is the correct order of the CSS box model?

A) Border, Margin, Height, Width

B) Margin, Padding, Border, Content

C) Padding, Margin, Content, Border

D) Padding, Border, Width, Height

5 / 30

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

A) More advanced layout techniques

B) New features and enhancements

C) Better browser compatibility

D) Faster rendering engine

6 / 30

6. Which CSS property is used to make text italic?

A) font-style

B) text-style

C) font-italic

D) italic

7 / 30

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

A) Both have the same specificity

B) div.content

C) .content

D) Cannot be determined

8 / 30

8. When should vendor prefixes be removed from CSS properties?

A) After thorough testing and ensuring cross-browser compatibility

B) Only if the website is designed for modern browsers

C) Before the feature is widely supported by all browsers

D) Immediately after adding them for experimental features

9 / 30

9. Which CSS selector targets only the first occurrence of an element?

A) :first-of-type

B) :first-child

C) :first-element

D) :first

10 / 30

10. 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

11 / 30

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

A) font-family

B) font-weight

C) line-height

D) font-size

12 / 30

12. Which CSS3 property is used to create shadow effects around an element?

A) element-effect

B) element-shadow

C) box-shadow

D) shadow-effect

13 / 30

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

A) align-text

B) align

C) text-align

D) text-style

14 / 30

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

A) order

B) z-index

C) float

D) position

15 / 30

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

A) It targets devices with specific screen resolutions

B) It targets devices with specific screen widths

C) It targets devices with specific color capabilities

D) It targets devices with specific aspect ratios

16 / 30

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

A) color

B) text-color

C) background-color

D) background

17 / 30

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

A) -webkit-

B) -moz-

C) -ms-

D) -o-

18 / 30

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

A) opacity

B) alpha

C) visibility

D) transparent

19 / 30

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

A) ID: myID { ... }

B) #myID { ... }

C) .myID { ... }

D) [myID] { ... }

20 / 30

20. Which of the following is not a valid CSS selector?

A) #myElement

B) p

C) .myClass

D) $mySelector

21 / 30

21. Which property is used in Grid to control the alignment of grid items along the row axis?

A) align-items

B) justify-content

C) justify-items

D) align-content

22 / 30

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

A) To set the initial size of a flex item

B) To determine how much a flex item can shrink

C) To align flex items along the cross-axis

D) To determine how much a flex item can grow

23 / 30

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

A) row

B) column

C) column-reverse

D) row-reverse

24 / 30

24. Which CSS property is commonly associated with the use of vendor prefixes for achieving cross-browser compatibility?

A) color

B) background-color

C) border

D) transform

25 / 30

25. What does the CSS property order do in Flexbox?

A) Sets the order of flex items within their flex container

B) Adjusts the size of flex items

C) Aligns flex items along the cross-axis

D) Aligns flex items along the main axis

26 / 30

26. What is the purpose of using polyfills in CSS development?

A) To provide fallbacks for CSS features not supported by older browsers

B) To fix bugs in CSS code

C) To improve CSS rendering performance

D) To remove vendor prefixes

27 / 30

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

A) weight

B) font-bold

C) font-weight

D) font-style

28 / 30

28. What is the purpose of using feature detection libraries like Modernizr in CSS development?

A) To provide a fallback mechanism for older browsers

B) To detect the browser version

C) To remove vendor prefixes from CSS code

D) To optimize CSS performance

29 / 30

29. Which selector has higher specificity: #header .nav li.active or .nav li#active?

A) #header .nav li.active

B) Cannot be determined

C) Both have the same specificity

D) .nav li#active

30 / 30

30. 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 alignment of a flex item along the cross-axis

D) The ability of a flex item to grow

Your score is

The average score is 30%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes CSS Quiz Test Online

Bootstrap Quiz Test Online (30 random Questions)

HTML Quiz Test Online

10 Minutes HTML Quiz Test Online

JavaScript Quiz Test Online (30 Questions)

JSON Quiz Test Online (30 random Questions)

Related