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

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

A) justify-items

B) align-items

C) justify-content

D) align-content

2 / 30

What does the flexbox layout model in CSS3 offer?

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

B) A way to create grid-based layouts

C) Improved support for media queries

D) Advanced text formatting options

3 / 30

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

A) :last-of-type

B) :last-child

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

D) :not(:last-child)

4 / 30

Which property in Grid is used to set the size of a column or row?

A) grid-template-columns / grid-template-rows

B) row-height

C) grid-size

D) column-width

5 / 30

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

A) background-style

B) background

C) image

D) background-image

6 / 30

Which media query targets devices with a specific screen width?

A) @media (min-height: 768px)

B) @media (max-height: 768px)

C) @media (max-width: 768px)

D) @media (min-width: 768px)

7 / 30

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

A) @media query { ... }

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

C) media-query { ... }

D) media query { ... }

8 / 30

What does the CSS property order do in Flexbox?

A) Aligns flex items along the cross-axis

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

C) Adjusts the size of flex items

D) Aligns flex items along the main axis

9 / 30

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

A) justify-content

B) align-content

C) align-items

D) justify-items

10 / 30

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

A) background

B) background-color

C) color

D) text-color

11 / 30

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

A) hover

B) cursor

C) mouse

D) pointer

12 / 30

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

A) padding

B) border-spacing

C) margin

D) spacing

13 / 30

Which CSS3 property is used to apply transitions to elements?

A) transform

B) transition

C) transition-effect

D) animate

14 / 30

Which CSS3 property is used to create animations?

A) transition

B) animate

C) transform

D) keyframes

15 / 30

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

A) rgb(255, 0, 0)

B) 100% opacity

C) red

D) #FF0000

16 / 30

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

A) align-content

B) align-items

C) justify-items

D) justify-content

17 / 30

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

A) + (adjacent sibling combinator)

B) :adjacent

C) :next

D) ~ (general sibling combinator)

18 / 30

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

A) opacity

B) box-shadow

C) border-radius

D) text-shadow

19 / 30

What is the correct order of the CSS box model?

A) Padding, Margin, Content, Border

B) Padding, Border, Width, Height

C) Border, Margin, Height, Width

D) Margin, Padding, Border, Content

20 / 30

Which symbol is used for the universal selector in CSS?

A) %

B) ^

C) *

D) $

21 / 30

What is the correct way to link an external CSS file to an HTML document?

A) <link>styles.css</link>

B) <link rel="stylesheet" href="styles.css">

C) <style>styles.css</style>

D) <css src="styles.css"></css>

22 / 30

Why are vendor prefixes discouraged for production code?

A) They may cause compatibility issues with future browser versions

B) They slow down the rendering of web pages

C) They are not recognized by any browsers

D) They increase the size of CSS files

23 / 30

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

24 / 30

Which CSS selector has the highest specificity?

A) ID selectors

B) Element selectors

C) Universal selectors

D) Class selectors

25 / 30

What is the primary purpose of media queries in CSS?

A) To apply different styles based on the device characteristics

B) To create animations for web elements

C) To define the font family used in a webpage

D) To specify the color scheme of a website

26 / 30

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

A) display

B) flex-direction

C) text-align

D) orientation

27 / 30

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

A) align

B) text-style

C) text-align

D) align-text

28 / 30

Which CSS3 feature is used to apply gradients to elements?

A) gradient-color

B) color-gradient

C) linear-gradient

D) gradient-style

29 / 30

What does the term 'Cascading' refer to in CSS?

A) Applying styles from top to bottom

B) Applying styles from parent to child elements

C) Applying styles from child to parent elements

D) Applying styles based on specificity

30 / 30

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

A) background-color

B) transform

C) color

D) border

Your score is

The average score is 40%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

10 Minutes Bootstrap Quiz Test Online

SQL Quiz Test Online (30 random Questions)

Angular Quiz Test Online (30 random Questions)

JavaScript Quiz Test Online (30 random Questions)

JSON Quiz Test Online (30 random Questions)

HTML Quiz Test Online

Related