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

A) border-width

B) thickness

C) border-size

D) border-thickness

2 / 30

2. Which vendor prefix is used for Google Chrome?

A) -webkit-

B) -o-

C) -moz-

D) -ms-

3 / 30

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

A) flexbox

B) animation

C) border-radius

D) box-shadow

4 / 30

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

A) Apply 3D effects to elements

B) Change the font family of text

C) Rotate and scale elements

D) Create text animations

5 / 30

5. Which of the following is NOT a common technique for achieving cross-browser compatibility in CSS?

A) Utilizing CSS resets

B) Using vendor prefixes

C) Writing browser-specific CSS files

D) Implementing polyfills

6 / 30

6. Which CSS selector has the highest specificity?

A) ID selectors

B) Element selectors

C) Class selectors

D) Universal selectors

7 / 30

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

8 / 30

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

A) A gradual transition between two or more specified colors

B) Rounded corners for elements

C) Smooth transitions between colors

D) Shadow effects for elements

9 / 30

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

A) @media query { ... }

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

C) media-query { ... }

D) media query { ... }

10 / 30

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

A) Before the feature is widely supported by all browsers

B) After thorough testing and ensuring cross-browser compatibility

C) Immediately after adding them for experimental features

D) Only if the website is designed for modern browsers

11 / 30

11. Which CSS property is used to change the background color of an element?

A) text-color

B) background

C) background-color

D) color

12 / 30

12. What is the purpose of the orientation media query?

A) It targets devices with specific screen resolutions

B) It targets devices with specific operating systems

C) It targets devices with touch screens

D) It targets devices with landscape or portrait orientation

13 / 30

13. Which symbol is used for the universal selector in CSS?

A) $

B) %

C) *

D) ^

14 / 30

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

A) opacity: 0;

B) visibility: hidden;

C) position: absolute;

D) display: none;

15 / 30

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

A) align-items

B) align-content

C) justify-items

D) justify-content

16 / 30

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

A) shadow-effect

B) element-shadow

C) element-effect

D) box-shadow

17 / 30

17. Which CSS selector targets elements that are the direct children of another element?

A) > (child combinator)

B) :first-child

C) < (descendant combinator)

D) :child

18 / 30

18. In Flexbox, what is the purpose of the flex-shrink property?

A) To set the initial size of a flex item

B) To determine how much a flex item can grow

C) To align flex items along the cross-axis

D) To determine how much a flex item can shrink

19 / 30

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

A) layout

B) flow

C) grid

D) flexbox

20 / 30

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

A) 100

B) 110

C) 111

D) 101

21 / 30

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

A) It targets devices with specific screen widths

B) It targets devices with specific screen resolutions

C) It targets devices with specific aspect ratios

D) It targets devices with specific color capabilities

22 / 30

22. Which vendor prefix is associated with Safari?

A) -webkit-

B) -moz-

C) -ms-

D) -o-

23 / 30

23. Which of the following selectors has the least specificity?

A) Element selectors

B) Universal selectors

C) Class selectors

D) ID selectors

24 / 30

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

A) grid-template-rows

B) grid-template-columns

C) grid-area

D) grid-template-areas

25 / 30

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

A) margin

B) border-spacing

C) padding

D) spacing

26 / 30

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

A) border-style

B) rounded-corners

C) border-radius

D) corner-radius

27 / 30

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

A) The size of implicit grid rows

B) The alignment of grid items along the row axis

C) The size of explicit grid rows

D) The alignment of grid items along the column axis

28 / 30

28. What is the purpose of the min-width 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 greater than the specified value

C) It applies styles if the viewport width 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

29 / 30

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

A) display: flex;

B) display: block;

C) display: grid;

D) display: inline;

30 / 30

30. Why is cross-browser compatibility important in CSS development?

A) To ensure consistent rendering of web pages across different browsers

B) To reduce the size of CSS files

C) To make web pages load faster

D) To enhance security features of web pages

Your score is

The average score is 42%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes MongoDB Quiz Test Online

10 Minutes HTML Quiz Test Online

HTML Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Online Quiz Test (with time limit)

Angular Quiz Test Online (30 random Questions)

Related