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) drop-shadow

B) text-shadow

C) box-shadow

D) shadow-color

2 / 30

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

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

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

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

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

3 / 30

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

A) justify-items

B) align-items

C) justify-content

D) align-content

4 / 30

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

A) display: grid;

B) display: flex;

C) display: block;

D) display: inline;

5 / 30

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

A) width: 100%;

B) float: left;

C) position: absolute;

D) display: flex;

6 / 30

6. Which property is used in Grid to control the alignment of grid items along the row axis?

A) align-items

B) justify-items

C) justify-content

D) align-content

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 does the following media query target: @media (max-height: 600px)?

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

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

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

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

9 / 30

9. Which CSS property is used to control the transparency of an element?

A) opacity

B) alpha

C) transparency

D) transparent

10 / 30

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

A) font-style

B) font-italic

C) italic

D) text-style

11 / 30

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

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

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

C) It aligns individual grid items along the column axis

D) It sets the size of grid columns and rows

12 / 30

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

A) text-align

B) flex-direction

C) orientation

D) display

13 / 30

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

A) Targeting Opera browser

B) Targeting Microsoft Edge browser

C) Targeting Firefox browser

D) Targeting Safari and Chrome browsers

14 / 30

14. Which CSS property is used to set the font size of an element?

A) size

B) font

C) font-size

D) text-size

15 / 30

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

A) color

B) transform

C) background-color

D) border

16 / 30

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

17 / 30

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

A) transparent

B) visibility

C) alpha

D) opacity

18 / 30

18. Which CSS property is used to set the background image of an element?

A) background

B) image

C) background-style

D) background-image

19 / 30

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

A) Aligns flex items along the main axis

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

C) Aligns flex items along the cross-axis

D) Adjusts the size of flex items

20 / 30

20. What is the correct order of the CSS box model?

A) Padding, Border, Width, Height

B) Padding, Margin, Content, Border

C) Border, Margin, Height, Width

D) Margin, Padding, Border, Content

21 / 30

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

A) $

B) %

C) ^

D) *

22 / 30

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

A) spacing

B) border-spacing

C) margin

D) padding

23 / 30

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

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

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

C) The size of grid rows

D) The size of grid columns

24 / 30

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

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

B) :last-child

C) :last-of-type

D) :not(:last-child)

25 / 30

25. Which CSS technique is commonly used to adjust font sizes based on the viewport size?

A) font-size

B) font-weight

C) font-family

D) line-height

26 / 30

26. In Flexbox, what is the default value of the flex-direction property?

A) row

B) column

C) row-reverse

D) column-reverse

27 / 30

27. Which CSS selector targets elements that are adjacent to each other?

A) ~ (general sibling combinator)

B) :adjacent

C) + (adjacent sibling combinator)

D) :next

28 / 30

28. Which CSS3 feature is used to create 2D and 3D transformations?

A) rotate

B) translate

C) transform

D) transition

29 / 30

29. Which CSS3 feature is used to apply rounded corners to elements?

A) border-radius

B) text-shadow

C) box-shadow

D) opacity

30 / 30

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

A) text-style

B) font-color

C) color

D) text-color

Your score is

The average score is 38%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Bootstrap Quiz Test Online (30 random Questions)

10 Minutes CSS Quiz Test Online

Online Quiz Test (with time limit)

10 Minutes HTML Quiz Test Online

Docker Quiz Test Online (30 random Questions)

HTML Quiz Test Online

Related