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 make text italic?

A) font-style

B) italic

C) text-style

D) font-italic

2 / 30

2. Which CSS property is used to set the font weight?

A) font-bold

B) weight

C) font-style

D) font-weight

3 / 30

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

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

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

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

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

4 / 30

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

A) text-size

B) font-size

C) size

D) font

5 / 30

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

A) Viewports with a width greater 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 less than or equal to 600 pixels

6 / 30

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

A) Apply animations to elements

B) Create multi-column layouts

C) Specify timing functions for animations

D) Define gradients for backgrounds

7 / 30

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

A) text-shadow

B) opacity

C) border-radius

D) box-shadow

8 / 30

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

A) border-spacing

B) margin

C) spacing

D) padding

9 / 30

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

A) 101

B) 110

C) 100

D) 111

10 / 30

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

A) 111

B) 112

C) 121

D) 1100

11 / 30

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

A) 1

B) 1000

C) 10

D) 0

12 / 30

12. 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 height 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 width is equal to or greater than the specified value

13 / 30

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

A) element-shadow

B) border-shadow

C) text-shadow

D) box-shadow

14 / 30

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

A) absolute

B) relative

C) fixed

D) static

15 / 30

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

A) animation

B) box-shadow

C) flexbox

D) border-radius

16 / 30

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

A) Smooth transitions between colors

B) Rounded corners for elements

C) A gradual transition between two or more specified colors

D) Shadow effects for elements

17 / 30

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

A) :last-of-type

B) :not(:last-child)

C) :last-child

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

18 / 30

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

A) box-shadow

B) element-shadow

C) element-effect

D) shadow-effect

19 / 30

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

20 / 30

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

A) column-reverse

B) row-reverse

C) column

D) row

21 / 30

21. Which CSS property is used to specify the thickness of the border?

A) border-size

B) thickness

C) border-width

D) border-thickness

22 / 30

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

A) *className

B) .className

C) #className

D) className

23 / 30

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

A) color

B) background-color

C) text-color

D) background

24 / 30

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

A) Margin, Padding, Border, Content

B) Padding, Border, Width, Height

C) Padding, Margin, Content, Border

D) Border, Margin, Height, Width

25 / 30

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

A) alpha

B) visibility

C) opacity

D) transparent

26 / 30

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

A) Adjusts the size of flex items

B) Aligns flex items along the cross-axis

C) Aligns flex items along the main axis

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

27 / 30

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

A) justify-content

B) align-items

C) align-content

D) justify-items

28 / 30

28. What is the purpose of the pointer media feature?

A) It targets devices with specific screen widths

B) It targets devices with specific screen resolutions

C) It targets devices with specific pointing devices, such as a mouse or touchscreen

D) It targets devices with specific aspect ratios

29 / 30

29. Which CSS property is used to create a shadow effect for text?

A) shadow

B) text-shadow

C) text-effect

D) box-shadow

30 / 30

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

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

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

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

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

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

SQL Quiz Test Online (30 random Questions)

HTML Quiz Test Online

10 Minutes Docker Quiz Test Online

10 Minutes MongoDB Quiz Test Online

10 Minutes Bootstrap Quiz Test Online

10 Minutes CSS Quiz Test Online

Related