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 purpose of vendor prefixes in CSS?

A) To target specific browsers and apply proprietary CSS features

B) To enhance security features in CSS stylesheets

C) To remove compatibility issues between different CSS versions

D) To ensure consistency in CSS rendering across all browsers

2 / 30

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

A) 111

B) 110

C) 100

D) 101

3 / 30

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

4 / 30

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

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

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

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

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

5 / 30

5. Which of the following is an example of an inline CSS?

A) <body style="color: blue;">

B) .text { color: green; }

C) <style>body { color: red; } </style>

D) <link rel="stylesheet" href="styles.css">

6 / 30

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

A) :child-of

B) :child-nth

C) :nth-of-type

D) :nth-child

7 / 30

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

A) transparent

B) visibility

C) alpha

D) opacity

8 / 30

8. What does the flexbox layout model in CSS3 offer?

A) Advanced text formatting options

B) Improved support for media queries

C) A way to create grid-based layouts

D) A more efficient way to lay out, align, and distribute space among items in a container

9 / 30

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

A) 111

B) 121

C) 123

D) 1003

10 / 30

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

A) padding

B) spacing

C) border-spacing

D) margin

11 / 30

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

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

B) It targets devices with specific screen widths

C) It targets devices with specific screen resolutions

D) It targets devices with specific aspect ratios

12 / 30

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

A) 101

B) 100

C) 102

D) 010

13 / 30

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

A) It targets devices with specific screen resolutions

B) It targets devices with specific aspect ratios

C) It targets devices with specific color capabilities

D) It targets devices with specific screen widths

14 / 30

14. In Grid, what does the grid-auto-rows property define?

A) The alignment of grid items along the row axis

B) The size of explicit grid rows

C) The alignment of grid items along the column axis

D) The size of implicit grid rows

15 / 30

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

A) Adjusts the size of flex items

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

C) Aligns flex items along the cross-axis

D) Aligns flex items along the main axis

16 / 30

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

A) transform

B) border

C) background-color

D) color

17 / 30

17. What is the purpose of the min-width media query?

A) It applies styles if the viewport width is equal to or less than the specified value

B) It applies styles if the viewport height is equal to or greater than the specified value

C) It applies styles if the viewport height is equal to or less than the specified value

D) It applies styles if the viewport width is equal to or greater than the specified value

18 / 30

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

A) flexbox

B) flow

C) layout

D) grid

19 / 30

19. Which of the following has the highest specificity?

A) .myClass #myID

B) #myID

C) .myClass p

D) body div p

20 / 30

20. 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"]

21 / 30

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

A) border-radius

B) rounded-corners

C) corner-radius

D) border-style

22 / 30

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

A) Autoprefixer

B) CSS Minifier

C) CSS Lint

D) CSS Validator

23 / 30

23. What does the transform property in CSS3 allow you to do?

A) Change the font family of text

B) Rotate and scale elements

C) Create text animations

D) Apply 3D effects to elements

24 / 30

24. What CSS property is used to create a grid container?

A) display: inline;

B) display: block;

C) display: flex;

D) display: grid;

25 / 30

25. What does the gradients feature in CSS3 allow you to create?

A) A gradual transition between two or more specified colors

B) Smooth transitions between colors

C) Rounded corners for elements

D) Shadow effects for elements

26 / 30

26. What does the align-content property do in Flexbox?

A) Aligns flex items along the cross-axis

B) Aligns a flex container's lines within the flex container when there is extra space in the cross-axis

C) Aligns flex items along the main axis

D) Adjusts the size of flex items

27 / 30

27. What does the CSS property align-self do in Flexbox?

A) Aligns flex items along the main axis

B) Adjusts the size of flex items

C) Aligns a flex item within its flex container along the cross-axis

D) Aligns flex items along the cross-axis

28 / 30

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

A) width

B) dimension

C) length

D) size

29 / 30

29. What does the justify-self property do in Grid?

A) Aligns grid items along the main axis

B) Aligns a grid item within its grid area along the inline axis

C) Aligns grid items along the cross-axis

D) Adjusts the size of grid columns

30 / 30

30. What is the correct way to link an external CSS file to an HTML document?

A) <link rel="stylesheet" href="styles.css">

B) <style>styles.css</style>

C) <link>styles.css</link>

D) <css src="styles.css"></css>

Your score is

The average score is 43%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes HTML Quiz Test Online

Online Quiz Test (with time limit)

10 Minutes Bootstrap Quiz Test Online

Docker Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

10 Minutes Docker Quiz Test Online

Related