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 selector has higher specificity: #header .nav li.active or .nav li#active?

A) Both have the same specificity

B) .nav li#active

C) Cannot be determined

D) #header .nav li.active

2 / 30

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

A) align-content

B) align-items

C) justify-items

D) justify-content

3 / 30

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

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

B) Aligns flex items along the main axis

C) Adjusts the size of flex items

D) Aligns flex items along the cross-axis

4 / 30

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

5 / 30

5. What CSS property is used to create a flexible container with a set of flex items?

A) display: block;

B) display: grid;

C) display: inline;

D) display: flex;

6 / 30

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

A) -webkit-

B) -moz-

C) -o-

D) -ms-

7 / 30

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

A) background-color

B) transform

C) border

D) color

8 / 30

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

A) It sets the size of grid columns and rows

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

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

D) It aligns individual grid items along the column axis

9 / 30

9. Which CSS property typically requires a -ms- prefix for compatibility with Internet Explorer?

A) animation

B) flexbox

C) box-shadow

D) border-radius

10 / 30

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

A) display: flex;

B) position: absolute;

C) float: left;

D) text-align: center;

11 / 30

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

A) order

B) float

C) position

D) z-index

12 / 30

12. How do you create a group of selectors in CSS?

A) Separate selectors with commas

B) Separate selectors with spaces

C) Separate selectors with semicolons

D) Separate selectors with plus signs

13 / 30

13. 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) { ... }

14 / 30

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

A) display: inline;

B) display: grid;

C) display: flex;

D) display: block;

15 / 30

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

A) p

B) $mySelector

C) #myElement

D) .myClass

16 / 30

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

A) align

B) text-align

C) align-text

D) text-style

17 / 30

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

A) orientation

B) display

C) flex-direction

D) text-align

18 / 30

18. What CSS property is used to create a responsive grid layout in CSS?

A) display: inline-block;

B) display: grid;

C) display: flex;

D) display: table;

19 / 30

19. What is the specificity value of the following selector: div#content .paragraph?

A) 100

B) 110

C) 111

D) 101

20 / 30

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

A) italic

B) text-style

C) font-style

D) font-italic

21 / 30

21. Which of the following has the highest specificity?

A) .myClass #myID

B) #myID

C) body div p

D) .myClass p

22 / 30

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

A) flexbox

B) flow

C) layout

D) grid

23 / 30

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

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

B) To improve CSS rendering performance

C) To remove vendor prefixes

D) To fix bugs in CSS code

24 / 30

24. Why are vendor prefixes discouraged for production code?

A) They are not recognized by any browsers

B) They may cause compatibility issues with future browser versions

C) They increase the size of CSS files

D) They slow down the rendering of web pages

25 / 30

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

A) dimension

B) length

C) size

D) width

26 / 30

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

A) The size of grid columns

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

C) The size of grid rows

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

27 / 30

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

A) All of the above

B) :hover selector

C) :active selector

D) :focus selector

28 / 30

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

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

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

C) .text { color: green; }

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

29 / 30

29. Which media query targets devices with a specific aspect ratio, such as widescreen monitors?

A) @media (orientation: landscape)

B) @media (min-aspect-ratio: 16/9)

C) @media (aspect-ratio: 16/9)

D) @media (max-aspect-ratio: 16/9)

30 / 30

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

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

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

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

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

Your score is

The average score is 43%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Online Quiz Test (with time limit)

SQL Quiz Test Online (30 random Questions)

10 Minutes Angular Quiz Test Online

10 Minutes Bootstrap Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes SQL Quiz Test Online

Related