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. What is the purpose of the pointer media feature?

A) It targets devices with specific aspect ratios

B) It targets devices with specific screen widths

C) It targets devices with specific screen resolutions

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

2 / 30

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

A) className

B) #className

C) *className

D) .className

3 / 30

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

A) Cannot be determined

B) .nav li#active

C) #header .nav li.active

D) Both have the same specificity

4 / 30

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

A) red

B) 100% opacity

C) #FF0000

D) rgb(255, 0, 0)

5 / 30

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

A) color

B) text-color

C) font-color

D) text-style

6 / 30

6. What is the purpose of the max-height 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 height is equal to or less 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

7 / 30

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

A) Autoprefixer

B) CSS Lint

C) CSS Minifier

D) CSS Validator

8 / 30

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

A) image

B) background

C) background-style

D) background-image

9 / 30

9. Which vendor prefix is associated with Safari?

A) -ms-

B) -moz-

C) -o-

D) -webkit-

10 / 30

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

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

B) The initial size of a flex item

C) The ability of a flex item to grow

D) The ability of a flex item to shrink

11 / 30

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

A) justify-content

B) align-items

C) justify-items

D) align-content

12 / 30

12. Which CSS3 property is used to create animations?

A) transition

B) transform

C) animate

D) keyframes

13 / 30

13. Which CSS selector has the highest specificity?

A) Class selector

B) Tag selector

C) ID selector

D) Universal selector

14 / 30

14. Which CSS property is used to specify the viewport width in a media query?

A) device-width

B) screen-width

C) window-width

D) viewport-width

15 / 30

15. How can you override inline styles with CSS?

A) Use JavaScript to remove inline styles

B) Increase the specificity of the CSS rule

C) Use the !important declaration

D) Use inline styles with higher specificity

16 / 30

16. What does the justify-self property do in Grid?

A) Aligns a grid item within its grid area along the inline axis

B) Adjusts the size of grid columns

C) Aligns grid items along the cross-axis

D) Aligns grid items along the main axis

17 / 30

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

A) border-radius

B) opacity

C) box-shadow

D) text-shadow

18 / 30

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

A) A way to create grid-based layouts

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

C) Improved support for media queries

D) Advanced text formatting options

19 / 30

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

A) Pseudo-classes

B) Transitions

C) Flexbox

D) Animations

20 / 30

20. Which CSS property is used to set the width of an element?

A) width

B) length

C) size

D) dimension

21 / 30

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

A) Class selectors

B) Element selectors

C) Universal selectors

D) ID selectors

22 / 30

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

23 / 30

23. Which CSS property is used to align text within an element?

A) align

B) text-style

C) align-text

D) text-align

24 / 30

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

A) > (child combinator)

B) < (descendant combinator)

C) :first-child

D) :child

25 / 30

25. Which CSS property is used to control the spacing between lines of text?

A) spacing

B) line-height

C) line-spacing

D) text-spacing

26 / 30

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

A) text-shadow

B) shadow

C) text-effect

D) box-shadow

27 / 30

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

A) float

B) position

C) order

D) z-index

28 / 30

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

A) relative

B) static

C) fixed

D) absolute

29 / 30

29. Which CSS3 feature is used to create a responsive design for web pages?

A) animations

B) transitions

C) media queries

D) grids

30 / 30

30. Which of the following selectors selects all elements of a specific type?

A) Descendant selector

B) Class selector

C) ID selector

D) Universal selector

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

Bootstrap Quiz Test Online (30 random Questions)

Docker Quiz Test Online (30 random Questions)

10 Minutes Bootstrap Quiz Test Online

Online Quiz Test (with time limit)

10 Minutes CSS Quiz Test Online

10 Minutes JSON Quiz Test Online

Related