20 CSS MCQs Answers with Explanation:
1. Which CSS property is used to change the spacing between letters in a text?
Answer:
b) letter-spacing
Explanation:
The correct answer is b) letter-spacing. The “letter-spacing” property is used to adjust the amount of space between characters in a text.
2. What does the acronym “CSS” stand for?
Answer:
c) Cascading Style Sheets
Explanation:
The correct answer is c) Cascading Style Sheets. “CSS” stands for Cascading Style Sheets, which is a stylesheet language used for describing the presentation of a document written in HTML.
3. Which CSS selector targets an element with the class “highlight”?
Answer:
b) .highlight
Explanation:
The correct answer is b) .highlight. To target an element with a class, you use the dot (.) notation followed by the class name, like “.highlight”.
4. The “box-model” in CSS consists of which four elements?
Answer:
a) Margin, Border, Padding, Content
Explanation:
The correct answer is a) Margin, Border, Padding, Content. The box model includes these four components which determine the size and spacing of elements on a webpage.
5. What CSS property is used to create rounded corners for an element?
Answer:
b) border-radius
Explanation:
The correct answer is b) border-radius. The “border-radius” property is used to create rounded corners for an element’s border.
6. Which CSS value is commonly used to horizontally center an element?
Answer:
b) margin-auto
Explanation:
The correct answer is b) margin-auto. Setting the horizontal margin to “auto” centers the element within its parent container.
7. Which property allows you to change the transparency of an element in CSS?
Answer:
a) opacity
Explanation:
The correct answer is a) opacity. The “opacity” property controls the transparency of an element, with values ranging from 0 (completely transparent) to 1 (fully opaque).
8. The “float” property in CSS is used primarily for:
Answer:
c) Positioning elements horizontally
Explanation:
The correct answer is c) Positioning elements horizontally. The “float” property is used to position elements side by side within a container, commonly used for creating multi-column layouts.
9. Which CSS pseudo-class targets a link when a user hovers over it?
Answer:
a) :hover
Explanation:
The correct answer is a) :hover. The “:hover” pseudo-class targets an element when a user hovers the cursor over it.
10. What is the purpose of the “z-index” property in CSS?
Answer:
c) Controlling the stacking order of elements
Explanation:
The correct answer is c) Controlling the stacking order of elements. The “z-index” property determines the order in which elements are stacked, affecting which one appears on top of others in the z-axis.
11. In CSS, which property is used to change the background color of an element?
Answer:
a) background-color
Explanation:
The correct answer is a) background-color. The “background-color” property is used to set the background color of an element.
12. What does “CSS specificity” refer to?
Answer:
d) The hierarchy of rules that determines which styles are applied to an element
Explanation:
The correct answer is d) The hierarchy of rules that determines which styles are applied to an element. CSS specificity refers to the rules that determine which styles take precedence when conflicting styles are applied to the same element.
13. Which CSS unit is relative to the font size of the parent element?
Answer:
b) em
Explanation:
The correct answer is b) em. The “em” unit is relative to the font size of the parent element. It allows for scalable typography and spacing.
14. Which property is used to align text within its containing element?
Answer:
a) text-align
Explanation:
The correct answer is a) text-align. The “text-align” property is used to horizontally align text within its containing element.
15. What is the purpose of the “display” property in CSS?
Answer:
c) Controlling how an element is rendered in the layout
Explanation:
The correct answer is c) Controlling how an element is rendered in the layout. The “display” property determines how an element is displayed in relation to other elements.
16. Which CSS property is used to control the spacing between lines of text?
Answer:
c) line-height
Explanation:
The correct answer is c) line-height. The “line-height” property controls the vertical spacing between lines of text within an element.
17. What does the CSS property “position: absolute;” do?
Answer:
a) Positions an element relative to its normal position
Explanation:
The correct answer is a) Positions an element relative to its normal position. The “position: absolute;” property removes the element from the normal flow and positions it based on its closest positioned ancestor.
18. Which value of the “position” property in CSS keeps an element in its normal position within the document flow?
Answer:
d) static
Explanation:
The correct answer is d) static. The “position: static;” value keeps an element in its normal position within the document flow.
19. Which property is used to change the style of the border between different elements?
Answer:
b) border-style
Explanation:
The correct answer is b) border-style. The “border-style” property is used to change the style of the border between different elements.
20. What is the purpose of the CSS property “box-shadow”?
Answer:
a) To add a shadow to the background of an element
Explanation:
The correct answer is a) To add a shadow to the background of an element. The “box-shadow” property is used to create shadow effects around elements, providing depth and dimension to the layout.
Keep up the good work in expanding your CSS knowledge!