CSS Quiz Test Online (30 random 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 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 CSS property typically requires a -ms- prefix for compatibility with Internet Explorer?

A) flexbox

B) border-radius

C) box-shadow

D) animation

2 / 30

2. 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 height greater than or equal to 768 pixels

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

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

3 / 30

3. Which vendor prefix is used for Google Chrome?

A) -webkit-

B) -o-

C) -ms-

D) -moz-

4 / 30

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

A) Applying styles from top to bottom

B) Applying styles from parent to child elements

C) Applying styles from child to parent elements

D) Applying styles based on specificity

5 / 30

5. What is the specificity of the universal selector (*) in CSS?

A) 0

B) 1

C) 10

D) Infinite

6 / 30

6. Which of the following selectors selects all elements of a specific type?

A) Descendant selector

B) Universal selector

C) Class selector

D) ID selector

7 / 30

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

A) background-color

B) color

C) transform

D) border

8 / 30

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

A) Targeting Safari and Chrome browsers

B) Targeting Microsoft Edge browser

C) Targeting Opera browser

D) Targeting Firefox browser

9 / 30

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

A) Aligns grid items along the main axis

B) Aligns grid items along the cross-axis

C) Adjusts the size of grid columns

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

10 / 30

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

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

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

C) .text { color: green; }

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

11 / 30

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

12 / 30

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

A) Before the feature is widely supported by all browsers

B) Only if the website is designed for modern browsers

C) After thorough testing and ensuring cross-browser compatibility

D) Immediately after adding them for experimental features

13 / 30

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

A) Apply 3D effects to elements

B) Create text animations

C) Rotate and scale elements

D) Change the font family of text

14 / 30

14. Which of the following is not a valid CSS color value?

A) #FF0000

B) red

C) rgb(255, 0, 0)

D) 100% opacity

15 / 30

15. Which media query targets devices with high-resolution screens, such as Retina displays?

A) @media (device-resolution: 2dppx)

B) @media (min-resolution: 2dppx)

C) @media (resolution: 2dppx)

D) @media (max-resolution: 2dppx)

16 / 30

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

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

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

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

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

17 / 30

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

A) media query { ... }

B) @media query { ... }

C) media-query { ... }

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

18 / 30

18. What is the purpose of vendor prefixes in CSS?

A) To ensure consistency in CSS rendering across all browsers

B) To enhance security features in CSS stylesheets

C) To remove compatibility issues between different CSS versions

D) To target specific browsers and apply proprietary CSS features

19 / 30

19. Which CSS property is used to control the spacing between lines of text?

A) line-spacing

B) line-height

C) spacing

D) text-spacing

20 / 30

20. Which CSS3 property is used to create animations?

A) transition

B) keyframes

C) transform

D) animate

21 / 30

21. Which CSS3 feature is used to apply gradients to elements?

A) linear-gradient

B) gradient-style

C) color-gradient

D) gradient-color

22 / 30

22. Which CSS3 property is used to create drop shadows?

A) text-shadow

B) box-shadow

C) drop-shadow

D) shadow-color

23 / 30

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

A) .className

B) *className

C) className

D) #className

24 / 30

24. How can you override inline styles with CSS?

A) Use the !important declaration

B) Use JavaScript to remove inline styles

C) Use inline styles with higher specificity

D) Increase the specificity of the CSS rule

25 / 30

25. What is the CSS specificity value of an inline style?

A) 1

B) 10

C) 1000

D) 0

26 / 30

26. What is the default value of the position property in CSS?

A) relative

B) fixed

C) static

D) absolute

27 / 30

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

A) Separate selectors with spaces

B) Separate selectors with semicolons

C) Separate selectors with commas

D) Separate selectors with plus signs

28 / 30

28. Which CSS selector has the highest specificity?

A) Class selectors

B) ID selectors

C) Element selectors

D) Universal selectors

29 / 30

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

A) -webkit-

B) -moz-

C) -o-

D) -ms-

30 / 30

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

A) row-height

B) column-width

C) grid-template-columns / grid-template-rows

D) grid-size

Your score is

The average score is 51%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes MongoDB Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes Angular Quiz Test Online

10 Minutes HTML Quiz Test Online

10 Minutes JSON Quiz Test Online

JavaScript Quiz Test Online (30 random Questions)

Related