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. What is the correct syntax for defining a media query in CSS?

A) @media query { ... }

B) media-query { ... }

C) media query { ... }

D) @media { query: ...; }

2 / 30

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

A) font-bold

B) font-style

C) weight

D) font-weight

3 / 30

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

A) Targeting Microsoft Edge browser

B) Targeting Opera browser

C) Targeting Safari and Chrome browsers

D) Targeting Firefox browser

4 / 30

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

A) To apply different styles based on the device characteristics

B) To define the font family used in a webpage

C) To specify the color scheme of a website

D) To create animations for web elements

5 / 30

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

A) border-style

B) border-radius

C) rounded-corners

D) corner-radius

6 / 30

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

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

B) The size of grid rows

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

D) The size of grid columns

7 / 30

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

A) -o-

B) -moz-

C) -webkit-

D) -ms-

8 / 30

8. In Grid, what does the grid-gap property control?

A) The space between grid items

B) The space between grid lines

C) The size of grid rows

D) The size of grid columns

9 / 30

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

A) To remove vendor prefixes

B) To improve CSS rendering performance

C) To fix bugs in CSS code

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

10 / 30

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

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

B) :not(:last-child)

C) :last-of-type

D) :last-child

11 / 30

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

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

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

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

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

12 / 30

12. Which CSS3 property is used to control the order of elements when they overlap?

A) order

B) z-index

C) stack-order

D) position

13 / 30

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

A) position

B) float

C) z-index

D) order

14 / 30

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

A) Applying styles from top to bottom

B) Applying styles based on specificity

C) Applying styles from parent to child elements

D) Applying styles from child to parent elements

15 / 30

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

A) 100

B) 010

C) 101

D) 102

16 / 30

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

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

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

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

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

17 / 30

17. What does CSS stand for?

A) Cascading Style Sheets

B) Colorful Style Sheets

C) Creative Style Sheets

D) Computer Style Sheets

18 / 30

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

A) It targets devices with specific screen widths

B) It targets devices with specific aspect ratios

C) It targets devices with specific screen resolutions

D) It targets devices with specific color capabilities

19 / 30

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

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

B) To select elements based on their attributes

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

D) To exclude specific elements from being selected

20 / 30

20. Which CSS property is commonly used to adjust the layout based on the screen orientation?

A) text-align

B) display

C) flex-direction

D) orientation

21 / 30

21. What does the transition property in CSS3 allow you to do?

A) Define gradients for backgrounds

B) Apply animations to elements

C) Specify timing functions for animations

D) Create multi-column layouts

22 / 30

22. Which property in Grid is used to define named grid areas?

A) grid-template-areas

B) grid-area

C) grid-template-rows

D) grid-template-columns

23 / 30

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

A) element-shadow

B) border-shadow

C) text-shadow

D) box-shadow

24 / 30

24. Which CSS selector has the highest specificity?

A) Class selector

B) Universal selector

C) Tag selector

D) ID selector

25 / 30

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

A) After thorough testing and ensuring cross-browser compatibility

B) Immediately after adding them for experimental features

C) Only if the website is designed for modern browsers

D) Before the feature is widely supported by all browsers

26 / 30

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

A) justify-content

B) align-items

C) justify-items

D) align-content

27 / 30

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

A) item-position

B) grid-area

C) grid-placement

D) place-item

28 / 30

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

A) Using vendor prefixes

B) Writing browser-specific CSS files

C) Implementing polyfills

D) Utilizing CSS resets

29 / 30

29. Which CSS selector has the highest specificity?

A) Class selectors

B) ID selectors

C) Universal selectors

D) Element selectors

30 / 30

30. Which CSS3 property is used to create animations?

A) keyframes

B) transform

C) animate

D) transition

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes Bootstrap Quiz Test Online

10 Minutes JSON Quiz Test Online

MongoDB Quiz Test Online (30 random Questions)

JSON Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Related