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 selector targets elements based on their attributes?

A) [attribute]

B) .attribute

C) #attribute

D) :attribute

2 / 30

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

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

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

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

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

3 / 30

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

A) 101

B) 102

C) 100

D) 010

4 / 30

4. What is the purpose of a CSS reset?

A) To reset the CSS properties to their default values

B) To optimize CSS performance

C) To remove all default styles applied by browsers

D) To fix compatibility issues between different CSS versions

5 / 30

5. What does the CSS property align-self do in Flexbox?

A) Aligns a flex item within its flex container along the cross-axis

B) Adjusts the size of flex items

C) Aligns flex items along the cross-axis

D) Aligns flex items along the main axis

6 / 30

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

A) 1

B) Infinite

C) 0

D) 10

7 / 30

7. Which CSS selector targets elements that are the nth child of their parent?

A) :child-nth

B) :child-of

C) :nth-of-type

D) :nth-child

8 / 30

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

A) The size of grid rows

B) The size of grid columns

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

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

9 / 30

9. Which CSS property is used to create rounded corners?

A) rounded-corners

B) border-radius

C) border-style

D) corner-radius

10 / 30

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

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

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

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

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

11 / 30

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

12 / 30

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

A) Element selectors

B) ID selectors

C) Universal selectors

D) Class selectors

13 / 30

13. Which of the following is an example of an inline CSS?

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

B) <style>body { color: red; } </style>

C) .text { color: green; }

D) <body style="color: blue;">

14 / 30

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

A) float: left;

B) position: absolute;

C) text-align: center;

D) display: flex;

15 / 30

15. How can you override inline styles with CSS?

A) Use inline styles with higher specificity

B) Use JavaScript to remove inline styles

C) Use the !important declaration

D) Increase the specificity of the CSS rule

16 / 30

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

A) className

B) *className

C) #className

D) .className

17 / 30

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

A) To specify the color scheme of a website

B) To create animations for web elements

C) To define the font family used in a webpage

D) To apply different styles based on the device characteristics

18 / 30

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

A) 100

B) 110

C) 111

D) 101

19 / 30

19. Which CSS property is used to place a grid item within a grid area?

A) grid-placement

B) place-item

C) grid-area

D) item-position

20 / 30

20. Which of the following is NOT a common technique for achieving cross-browser compatibility in CSS?

A) Utilizing CSS resets

B) Implementing polyfills

C) Using vendor prefixes

D) Writing browser-specific CSS files

21 / 30

21. Which of the following is the correct CSS syntax to apply a style to an ID?

A) ID: myID { ... }

B) #myID { ... }

C) [myID] { ... }

D) .myID { ... }

22 / 30

22. Which CSS technique is commonly used to hide elements on smaller screens in responsive design?

A) position: absolute;

B) opacity: 0;

C) display: none;

D) visibility: hidden;

23 / 30

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

A) border-radius

B) animation

C) box-shadow

D) flexbox

24 / 30

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

A) The ability of a flex item to grow

B) The initial size of a flex item

C) The ability of a flex item to shrink

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

25 / 30

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

A) border-shadow

B) element-shadow

C) box-shadow

D) text-shadow

26 / 30

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

27 / 30

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

A) Define gradients for backgrounds

B) Apply animations to elements

C) Create multi-column layouts

D) Specify timing functions for animations

28 / 30

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

A) transparency

B) alpha

C) opacity

D) transparent

29 / 30

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

A) row

B) column

C) column-reverse

D) row-reverse

30 / 30

30. Which CSS3 feature is used to create responsive and flexible layouts?

A) flow

B) layout

C) flexbox

D) grid

Your score is

The average score is 43%

Rate Your Experience!

Anonymous feedback

Thank you for your feedback! We appreciate your input.

JSON Quiz Test Online (30 random Questions)

10 Minutes MongoDB Quiz Test Online

SQL Quiz Test Online (30 random Questions)

HTML Quiz Test Online

Angular Quiz Test Online (30 random Questions)

Bootstrap Quiz Test Online (30 random Questions)

Related