CSS Quiz - Multiple Choice Questions (MCQ)

Welcome CSS (Cascading Style Sheets) quiz. This CSS quiz consists of 30+ multiple-choice questions to put your skills to the test. Each question comes with detailed explanations to help you learn and improve your CSS expertise. Let's dive in and see how well you know your styles!

1. What is the full form of the acronym CSS?

a. Creative Style Sheets 

b. Cascading Style Sheets 

c. Colorful Style Sheets 

d. Computer Style Sheets 

Answer: 

b. Cascading Style Sheets 

Explanation: 

CSS stands for Cascading Style Sheets. It is used for describing the look and formatting of a document written in HTML. 

2. Which HTML attribute is used to define inline styles? 

a. class 

b. font 

c. style 

d. styles 

Answer: 

c. style 

Explanation: 

The style attribute is used in HTML to define inline CSS.

For example:

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

3. How do you insert a comment in a CSS file? 

a. // this is a comment // 

b. <!-- this is a comment --> 

c. /* this is a comment */ 

d. ' this is a comment ' 

Answer: 

c. /* this is a comment */ 

Explanation: 

CSS comments are written with /* and */. 

4. Which property is used to change the background color? 

a. bgcolor 

b. color 

c. background-color 

d. bg-color 

Answer: 

c. background-color 

Explanation: 

The background-color property specifies the background color of an element.

5. How do you select an element with the id "demo"? 

a. .demo 

b. #demo 

c. *demo 

d. $demo 

Answer: 

b. #demo 

Explanation: 

In CSS, an element is selected by its id using the # symbol followed by the id name.

6. How do you select an element with the class "my-class" in CSS? 

a) #my-class 

b) .my-class 

c) my-class 

d) <my-class> 

Answer: 

b) .my-class 

Explanation: 

To select an element with a specific class in CSS, you use a period (.) followed by the class name. For example, .my-class will select all elements with the class "my-class". 

7. Which property is used to change the text color of an element? 

a) color 

b) font-color 

c) text-color 

d) text 

Answer: 

a) color 

Explanation: 

The color property in CSS is used to change the text color of an element. You can specify colors using color names, hexadecimal values, RGB values, or HSL values.

8. Which property is used to change the font of an element? 

a. font-style 

b. text-font 

c. font-family 

d. text-family 

Answer: 

c. font-family 

Explanation: 

The font-family property is used to specify the font of an element. 

9. Which property is used to change the text size of an element? 

a. text-size 

b. font-size 

c. text-style 

d. size 

Answer: 

b. font-size 

Explanation: 

The font-size property is used to specify the size of the text. 

10. How do you make each word in a text start with a capital letter? 

a. text-transform:capitalize 

b. text-transform:uppercase 

c. text-transform:lowercase 

d. text-style:capitalize 

Answer: 

a. text-transform:capitalize 

Explanation: 

The text-transform property with the capitalize value will make the first letter of each word uppercase.

11. Which property is used to add a background image? 

a. background-color 

b. color 

c. background-image 

d. image-background 

Answer: 

c. background-image 

Explanation: 

The background-image property is used to specify a background image.

12. What is the default position value of an element in CSS?

a) static 

b) relative 

c) absolute 

d) fixed 

Answer: 

a) static 

Explanation: 

The default position value of an element in CSS is static. Elements with a static position are displayed in the normal document flow.

13. Which property is used to add space between the content and the border of an element?

a) margin 

b) padding 

c) border 

d) spacing 

Answer: 

b) padding 

Explanation: 

The padding property in CSS is used to add space between the content of an element and its border. It affects the inner area of the element.

14. What is the purpose of the z-index property in CSS? 

a) It controls the order of flex items. 

b) It sets the spacing between elements. 

c) It adjusts the opacity of an element. 

d) It controls the stacking order of elements. 

Answer: 

d) It controls the stacking order of elements. 

Explanation: 

The z-index property in CSS is used to control the stacking order of positioned elements. Elements with a higher z-index value are displayed in front of elements with a lower value.

15. Which property is used to create rounded corners for an element? 

a) border-style 

b) border-radius 

c) border-width 

d) border-color 

Answer: 

b) border-radius 

Explanation: 

The border-radius property in CSS is used to create rounded corners for an element's border. You can specify a single value for all corners or individual values for each corner.

16. What is the purpose of the display: none; property in CSS? 

a) It hides an element without affecting the layout. 

b) It removes the element from the DOM. 

c) It creates an invisible element that still occupies space. 

d) It applies an invisible background color to the element. 

Answer: 

a) It hides an element without affecting the layout. 

Explanation: 

The display: none; property in CSS hides an element from the layout, making it effectively invisible. However, it still occupies space in the document flow.

17. How do you select all <a> elements within an <div> element using CSS? 

a) div + a 

b) a > div 

c) div a 

d) a div 

Answer: 

c) div a 

Explanation: 

To select all <a> elements within a <div> element, you use a space between the two selectors. For example, div a will select all <a> elements inside a <div>.

18. What is the purpose of the float property in CSS? 

a) It controls the vertical alignment of an element. 

b) It allows text to wrap around an element. 

c) It animates an element's position. 

d) It applies a blur effect to an element. 

Answer: 

b) It allows text to wrap around an element. 

Explanation: 

The float property in CSS is used to allow text and other inline elements to wrap around a floated element, such as an image.

19. Which CSS property is used to change the style of the mouse cursor when hovering over an element? 

a) cursor-style 

b) mouse-cursor 

c) cursor-type 

d) cursor 

Answer: 

d) cursor 

Explanation: 

The cursor property in CSS is used to change the style of the mouse cursor when hovering over an element. It can take various values, such as "pointer", "default", "crosshair", etc. 

20. How do you apply a shadow effect to an element in CSS? 

a) box-shadow: 2px 2px gray; 

b) shadow: 2px 2px gray; 

c) text-shadow: 2px 2px gray; 

d) element-shadow: 2px 2px gray; 

Answer: 

a) box-shadow: 2px 2px gray; 

Explanation: 

To apply a shadow effect to an element in CSS, you use the box-shadow property, followed by the horizontal offset, vertical offset, blur radius, and color. 

21. What is the purpose of the transform property in CSS? 

a) It changes the position of an element. 

b) It applies a 3D effect to an element. 

c) It rotates and scales an element. 

d) It animates an element's size. 

Answer: 

c) It rotates and scales an element. 

Explanation: 

The transform property in CSS is used to rotate, scale, skew, or translate an element. It can be used to create various visual effects. 

22. How do you change the text alignment to the center for an element in CSS? 

a) align: center; 

b) text-align: center; 

c) align-text: center; 

d) text: center; 

Answer: 

b) text-align: center; 

Explanation: 

To change the text alignment to center for an element in CSS, you use the text-align property and set it to "center". 

23. What is the purpose of the @media rule in CSS? 

a) It defines custom fonts for different screen sizes. 

b) It applies styles based on user interactions. 

c) It allows the use of variables in CSS. 

d) It applies styles based on screen size and other media features. 

Answer: 

d) It applies styles based on screen size and other media features. 

Explanation: 

The @media rule in CSS is used to apply styles based on different media features, such as screen size, device orientation, and resolution. 

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

a) letter-spacing 

b) text-spacing 

c) line-height 

d) text-line-height 

Answer: 

c) line-height 

Explanation: 

The line-height property in CSS is used to control the spacing between lines of text within an element. 

25. What is the purpose of the opacity property in CSS? 

a) It changes the transparency of an element. 

b) It creates a blur effect on an element. 

c) It adjusts the brightness of an element.

 d) It sets the reflection of an element. 

Answer: 

a) It changes the transparency of an element. 

Explanation: 

The opacity property in CSS is used to change the transparency of an element. A value of 1 is fully opaque, while 0 is fully transparent. 

26. How do you add a smooth transition effect to an element in CSS? 

a) transition: smooth; 

b) transition: 1s ease; 

c) animate: smooth; 

d) animate: 1s ease; 

Answer: 

b) transition: 1s ease; 

Explanation: 

To add a smooth transition effect to an element in CSS, you use the transition property, specifying the duration and easing function. 

27. Which CSS property is used to create a fixed-position element that remains in the same position even when scrolling? 

a) position: fixed; 

b) position: absolute; 

c) position: static; 

d) position: relative; 

Answer: 

a) position: fixed; 

Explanation: 

The position: fixed; property in CSS is used to create a fixed-position element that remains in the same position relative to the viewport, even when scrolling. 

28. What is the purpose of the overflow property in CSS? 

a) It controls the visibility of an element's content. 

b) It sets the shadow effect of an element. 

c) It adjusts the space between elements. 

d) It creates a gradient background for an element. 

Answer: 

a) It controls the visibility of an element's content. 

Explanation: 

The overflow property in CSS is used to control how the content of an element is displayed when it overflows its box. 

29. How do you set the width of an element to be 50% of its parent's width in CSS? 

a) width: 50; 

b) width: 50px; 

c) width: 50%; 

d) width: 0.5; 

Answer: 

c) width: 50%; 

Explanation: 

To set the width of an element to be 50% of its parent's width in CSS, you use the percentage value. 

30. What is the purpose of the flexbox layout in CSS? 

a) It creates a grid-like layout for elements. 

b) It arranges elements in a single row or column. 

c) It aligns elements based on their baseline. 

d) It creates complex 3D layouts. 

Answer: 

b) It arranges elements in a single row or column. 

Explanation: 

The flexbox layout in CSS is used to arrange elements in a flexible manner in a single row or column, distributing available space among them. 

31. What color will the text be with the following CSS?

p {
  color: blue;
}

p {
  color: red;
}

a) Blue

b) Red

c) Both

d) None

Answer:

c) Both

Explanation:

In CSS, if two rules have the same specificity, the last rule will be applied. Therefore, the paragraph text will be red, not blue.

32. What does the following CSS selector select?

div p {
}

a) All p elements

b) All div elements

c) All p elements inside div elements

d) All div elements inside p elements

Answer:

c) All p elements inside div elements

Explanation:

The space between "div" and "p" is a descendant combinator, meaning it selects all p elements that are descendants of div.

33. How do you make every element bold in CSS?

a)

p {
  font-style: bold;
}

b)

p {
  font-weight: bold;
}

c)

p {
  text-weight: bold;
}

d) None of the above

Answer:

b)

p {
  font-weight: bold;
}

Explanation:

The font-weight property in CSS is used to set the weight or thickness of the font. font-weight: bold; will make the text bold.

Conclusion

Congratulations on completing the CSS quiz! We hope you enjoyed the challenge and learned some new CSS concepts along the way. CSS is a powerful styling language that allows you to create visually stunning web pages and user interfaces. 

Keep practicing and experimenting to become a CSS master! Happy coding!