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 set the font weight?

A) weight

B) font-bold

C) font-weight

D) font-style

2 / 30

2. What is the specificity value of the selector: body p#content?

A) 101

B) 010

C) 100

D) 102

3 / 30

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

A) stack-order

B) position

C) z-index

D) order

4 / 30

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

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

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

C) @media (orientation: landscape)

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

5 / 30

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

A) float

B) z-index

C) order

D) position

6 / 30

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

A) text-align

B) display

C) flex-direction

D) orientation

7 / 30

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

A) Transitions

B) Animations

C) Pseudo-classes

D) Flexbox

8 / 30

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

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

B) The size of grid columns

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

D) The size of grid rows

9 / 30

9. Which vendor prefix is associated with Safari?

A) -webkit-

B) -ms-

C) -o-

D) -moz-

10 / 30

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

A) The space between grid items

B) The space between grid lines

C) The size of grid rows

D) The size of grid columns

11 / 30

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

A) display: flex;

B) text-align: center;

C) float: left;

D) position: absolute;

12 / 30

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

A) #attribute

B) .attribute

C) :attribute

D) [attribute]

13 / 30

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

A) 0

B) 10

C) 1000

D) 1

14 / 30

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

A) 10

B) 0

C) 1

D) Infinite

15 / 30

15. What does specificity determine in CSS?

A) The order of application of styles

B) The importance of styles

C) The strength of a selector's style rules

D) The uniqueness of a selector

16 / 30

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

A) display: grid;

B) display: flex;

C) display: table;

D) display: inline-block;

17 / 30

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

A) To ensure consistency in CSS rendering across all browsers

B) To remove compatibility issues between different CSS versions

C) To target specific browsers and apply proprietary CSS features

D) To enhance security features in CSS stylesheets

18 / 30

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

A) It aligns individual grid items along the column axis

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

C) It sets the size of grid columns and rows

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

19 / 30

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

A) linear-gradient

B) color-gradient

C) gradient-color

D) gradient-style

20 / 30

20. What is the primary purpose of media queries in CSS?

A) To create animations for web elements

B) To apply different styles based on the device characteristics

C) To specify the color scheme of a website

D) To define the font family used in a webpage

21 / 30

21. Which vendor prefix is used for Google Chrome?

A) -webkit-

B) -moz-

C) -ms-

D) -o-

22 / 30

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

A) Aligns flex items along the main axis

B) Adjusts the size of flex items

C) Aligns flex items along the cross-axis

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

23 / 30

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

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

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

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

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

24 / 30

24. Which CSS3 feature is used to apply a shadow effect to elements?

A) text-shadow

B) border-shadow

C) element-shadow

D) box-shadow

25 / 30

25. Which CSS property is used to specify the type of cursor to be displayed when hovering over an element?

A) pointer

B) hover

C) cursor

D) mouse

26 / 30

26. 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 greater than or equal to 600 pixels

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

27 / 30

27. 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 optimize CSS performance

C) To detect the browser version

D) To remove vendor prefixes from CSS code

28 / 30

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

A) It targets devices with specific screen resolutions

B) It targets devices with touch screens

C) It targets devices with specific operating systems

D) It targets devices with landscape or portrait orientation

29 / 30

29. Which CSS selector has the highest specificity?

A) Universal selectors

B) ID selectors

C) Class selectors

D) Element selectors

30 / 30

30. What does the flexbox layout model in CSS3 offer?

A) Advanced text formatting options

B) A more efficient way to lay out, align, and distribute space among items in a container

C) Improved support for media queries

D) A way to create grid-based layouts

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes MongoDB Quiz Test Online

Online Quiz Test (with time limit)

MongoDB Quiz Test Online (30 random Questions)

JavaScript Quiz Test Online (30 random Questions)

10 Minutes CSS Quiz Test Online

10 Minutes JavaScript Quiz Test Online

Related