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 CSS3 property is used to create drop shadows?

A) shadow-color

B) text-shadow

C) drop-shadow

D) box-shadow

2 / 30

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

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

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

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

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

3 / 30

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

A) :child-of

B) :nth-child

C) :nth-of-type

D) :child-nth

4 / 30

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

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

B) Aligns flex items along the main axis

C) Aligns flex items along the cross-axis

D) Adjusts the size of flex items

5 / 30

5. 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 aligns individual grid items along the column axis

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

6 / 30

6. Why are vendor prefixes discouraged for production code?

A) They are not recognized by any browsers

B) They slow down the rendering of web pages

C) They increase the size of CSS files

D) They may cause compatibility issues with future browser versions

7 / 30

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

A) #myID { ... }

B) .myID { ... }

C) ID: myID { ... }

D) [myID] { ... }

8 / 30

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

A) To optimize CSS performance

B) To remove vendor prefixes from CSS code

C) To provide a fallback mechanism for older browsers

D) To detect the browser version

9 / 30

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

A) 112

B) 121

C) 111

D) 1100

10 / 30

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

A) text-shadow

B) text-style

C) text-effect

D) text-outline

11 / 30

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

A) :last-of-type

B) :last-child

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

D) :not(:last-child)

12 / 30

12. Which CSS property is used to specify the color of the text?

A) font-color

B) text-style

C) text-color

D) color

13 / 30

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

A) It targets devices with specific screen resolutions

B) It targets devices with specific aspect ratios

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

D) It targets devices with specific screen widths

14 / 30

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

A) grid-area

B) grid-template-rows

C) grid-template-areas

D) grid-template-columns

15 / 30

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

A) element-shadow

B) shadow-effect

C) box-shadow

D) element-effect

16 / 30

16. Which vendor prefix is associated with Safari?

A) -moz-

B) -webkit-

C) -ms-

D) -o-

17 / 30

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

A) Cannot be determined

B) .content

C) div.content

D) Both have the same specificity

18 / 30

18. What is the correct syntax for defining a media query in CSS?

A) media-query { ... }

B) media query { ... }

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

D) @media query { ... }

19 / 30

19. Which CSS technique is commonly used to hide elements on smaller screens in responsive design?

A) visibility: hidden;

B) opacity: 0;

C) display: none;

D) position: absolute;

20 / 30

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

A) The size of grid rows

B) The size of grid columns

C) The space between grid lines

D) The space between grid items

21 / 30

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

A) Only if the website is designed for modern browsers

B) Immediately after adding them for experimental features

C) After thorough testing and ensuring cross-browser compatibility

D) Before the feature is widely supported by all browsers

22 / 30

22. Which property in Grid is used to set the size of a column or row?

A) grid-size

B) row-height

C) column-width

D) grid-template-columns / grid-template-rows

23 / 30

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

A) Separate selectors with commas

B) Separate selectors with plus signs

C) Separate selectors with spaces

D) Separate selectors with semicolons

24 / 30

24. What does the following media query target: @media (max-width: 768px)?

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

B) Viewports with a width less than or equal to 768 pixels

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

D) Viewports with a height less than or equal to 768 pixels

25 / 30

25. Which CSS property is used to specify the viewport width in a media query?

A) device-width

B) window-width

C) screen-width

D) viewport-width

26 / 30

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

A) Transitions

B) Pseudo-classes

C) Flexbox

D) Animations

27 / 30

27. Which CSS3 property is used to apply transitions to elements?

A) transition-effect

B) animate

C) transform

D) transition

28 / 30

28. Which CSS selector is used to select all elements with a specific class?

A) *className

B) .className

C) className

D) #className

29 / 30

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

A) Applying styles based on specificity

B) Applying styles from parent to child elements

C) Applying styles from child to parent elements

D) Applying styles from top to bottom

30 / 30

30. Which CSS property is commonly used to apply responsive design principles?

A) position: absolute;

B) float: left;

C) display: flex;

D) width: 100%;

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

MongoDB Quiz Test Online (30 random Questions)

SQL Quiz Test Online (30 random Questions)

10 Minutes CSS Quiz Test Online

10 Minutes JSON Quiz Test Online

10 Minutes SQL Quiz Test Online

Angular Quiz Test Online (30 random Questions)

Related