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 is used to specify the thickness of the border?

A) border-width

B) border-thickness

C) thickness

D) border-size

2 / 30

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

A) CSS Minifier

B) Autoprefixer

C) CSS Validator

D) CSS Lint

3 / 30

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

A) 121

B) 111

C) 112

D) 1100

4 / 30

4. Which selector has higher specificity: #header .nav li.active or .nav li#active?

A) .nav li#active

B) Both have the same specificity

C) Cannot be determined

D) #header .nav li.active

5 / 30

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

A) visibility

B) transparent

C) alpha

D) opacity

6 / 30

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

7 / 30

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

A) 10

B) Infinite

C) 1

D) 0

8 / 30

8. What is the purpose of the max-height media query?

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

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

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

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

9 / 30

9. Which property is used in Flexbox to align flex items along the cross-axis?

A) justify-content

B) justify-items

C) align-items

D) align-content

10 / 30

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

A) Specify timing functions for animations

B) Apply animations to elements

C) Create multi-column layouts

D) Define gradients for backgrounds

11 / 30

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

A) Immediately after adding them for experimental features

B) Before the feature is widely supported by all browsers

C) Only if the website is designed for modern browsers

D) After thorough testing and ensuring cross-browser compatibility

12 / 30

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

A) Animations

B) Flexbox

C) Pseudo-classes

D) Transitions

13 / 30

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

14 / 30

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

A) 101

B) 110

C) 100

D) 111

15 / 30

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

A) display

B) orientation

C) text-align

D) flex-direction

16 / 30

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

A) float

B) z-index

C) position

D) order

17 / 30

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

A) gradient-style

B) linear-gradient

C) color-gradient

D) gradient-color

18 / 30

18. Which of the following properties is used to align flex items along the main axis?

A) align-items

B) justify-items

C) align-content

D) justify-content

19 / 30

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

A) font-style

B) italic

C) text-style

D) font-italic

20 / 30

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

A) To provide a fallback mechanism for older browsers

B) To remove vendor prefixes from CSS code

C) To detect the browser version

D) To optimize CSS performance

21 / 30

21. What does the following media query target: @media (max-height: 600px)?

A) Viewports with a height greater than or equal to 600 pixels

B) Viewports with a height less than or equal to 600 pixels

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

D) Viewports with a width greater than or equal to 600 pixels

22 / 30

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

A) grid-area

B) grid-template-columns

C) grid-template-rows

D) grid-template-areas

23 / 30

23. Which CSS selector targets elements based on their attributes?

A) :attribute

B) [attribute]

C) .attribute

D) #attribute

24 / 30

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

A) Separate selectors with semicolons

B) Separate selectors with commas

C) Separate selectors with plus signs

D) Separate selectors with spaces

25 / 30

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

A) order

B) stack-order

C) position

D) z-index

26 / 30

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

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

B) It applies styles if the viewport width is equal to or less 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 height is equal to or greater than the specified value

27 / 30

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

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

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

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

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

28 / 30

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

A) red

B) #FF0000

C) rgb(255, 0, 0)

D) 100% opacity

29 / 30

29. In Flexbox, what does the flex-grow property determine?

A) The initial size of a flex item

B) The alignment of a flex item along the cross-axis

C) The ability of a flex item to shrink

D) The ability of a flex item to grow

30 / 30

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

A) 101

B) 110

C) 100

D) 111

Your score is

The average score is 35%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes JavaScript Quiz Test Online

10 Minutes SQL Quiz Test Online

10 Minutes HTML Quiz Test Online

Online Quiz Test (with time limit)

10 Minutes Angular Quiz Test Online

HTML Quiz Test Online

Related