1. Which CSS property is used to control the spacing between lines of text?
Step-by-Step Explanation
line-height sets the distance between lines of text.
letter-spacing adjusts the space between individual characters.
word-spacing adjusts the space between words.
text-spacing is not a valid CSS property.
Answer: c) line-height ✅
2. What does the CSS property box-sizing: border-box; do?
Step-by-Step Explanation
box-sizing: border-box; changes the default CSS box model, so the width and height properties include content, padding, and border. This makes it easier to manage element dimensions.
Adding borders, setting background colors, and rounding corners are done with separate CSS properties.
Answer: d) It includes the border and padding in the element's total width and height. ✅
3. Which CSS selector targets all <p> elements that are direct children of a <div> element?
Step-by-Step Explanation
div > p selects <p> elements that are immediate children of a <div>.
div p selects all <p> elements that are descendants of a <div> (not just direct children).
div + p selects the first <p> element that is immediately preceded by a <div>.
div ~ p selects every <p> element that is preceded by a <div> element.
Answer: c) div > p ✅
4. What is the purpose of the CSS z-index property?
Step-by-Step Explanation
z-index specifies the stack order of an element. An element with a higher z-index value will be displayed in front of elements with lower values.
Transparency is controlled by the opacity property.
Zooming is handled by transform: scale().
Animation speed is controlled by properties like transition-duration or animation-duration.
Answer: d) To define the element's position in the stacking order. ✅
5. Which CSS property is used to create rounded corners?
Step-by-Step Explanation
border-radius is the correct CSS property for creating rounded corners.
The other options are not valid CSS properties.
Answer: c) border-radius ✅
6. How do you make text bold using CSS?
Step-by-Step Explanation
font-weight: bold; sets the boldness of the font.
text-weight and text-style are not valid properties.
font-style is used for italic or oblique text.
Answer: c) font-weight: bold; ✅
7. Which CSS property is used to change the color of text?
Step-by-Step Explanation
color is the correct property for setting text color.
The other options are not valid CSS properties.
Answer: c) color ✅
8. What is the purpose of the CSS display: flex; property?
Step-by-Step Explanation
display: flex; enables the flexbox layout model, which provides a flexible way to align and distribute space among items in a container.
Grid layouts are created with display: grid;.
Floating is done with the float property.
Hiding elements is done with display: none; or visibility: hidden;.
Answer: c) To create a flexible box layout. ✅
9. Which CSS property is used to add a shadow to an element?
Step-by-Step Explanation
box-shadow adds a shadow effect to the element's box.
text-shadow adds a shadow effect to the text within an element.
The other options are not valid CSS properties.
Answer: b) box-shadow ✅
10. What does the CSS property overflow: hidden; do?
Step-by-Step Explanation
overflow: hidden; clips any content that extends beyond the element's boundaries.
Transparency is controlled by opacity.
Scrollbars are added with overflow: scroll; or overflow: auto;.
Borders are added with the border property.
Answer: c) It hides any content that overflows the element's box. ✅
11. Which CSS property is used to change the background color of an element?
Step-by-Step Explanation
background-color sets the background color of an element.
color sets the text color.
The other options are not valid CSS properties.
Answer: d) background-color ✅
12. How do you select all paragraph <p> elements in CSS?
Step-by-Step Explanation
p is the element selector for paragraph elements.
#p selects an element with the ID "p".
.p selects elements with the class "p".
paragraph is not a valid CSS selector.
Answer: c) p ✅
13. Which CSS property is used to set the font size of text?
Step-by-Step Explanation
font-size is used to set the size of text.
font-style sets the style of the font (e.g., italic).
The other options are not valid CSS properties.
Answer: c) font-size ✅
14. What does margin: 0 auto; do when applied to a block element?
Step-by-Step Explanation
margin: 0 auto; sets the top and bottom margins to 0 and the left and right margins to auto, which centers the element horizontally within its container.
It does not change borders or vertical alignment.
Answer: b) Centers the element horizontally. ✅
15. Which CSS property is used to hide an element?
Step-by-Step Explanation
visibility: hidden; hides the element but still reserves its space in the layout.
display: none; also hides the element but removes it from the layout flow.
opacity: 0; hides the element by making it transparent, but it still occupies its space.
Answer: b) visibility: hidden; ✅
16. What does the CSS calc() function allow you to do?
Step-by-Step Explanation
The calc() function allows you to perform calculations with CSS property values, such as width: calc(100% - 20px);.
It does not generate code, change properties based on server data, or sum elements.
Answer: b) Perform mathematical calculations for CSS property values. ✅
17. Which CSS selector targets an element that is the *n*th child of its parent, regardless of its type?
Step-by-Step Explanation
nth-child(n) selects the *n*th child element regardless of its type.
nth-of-type(n) selects the *n*th child of a specific type.
nth-last-child(n) selects the *n*th child from the end.
Answer: c) nth-child(n) ✅
18. What is the purpose of the CSS clip-path property?
Step-by-Step Explanation
clip-path allows you to define complex shapes to clip elements, showing only the parts within the defined shape.
It's not for gradients, shadows, or border animations.
Answer: b) To define a clipping region that determines what part of an element is shown. ✅
19. Which CSS property is used to create a grid layout with implicit tracks?
Step-by-Step Explanation
grid-auto-rows and grid-auto-columns define the size of automatically generated grid tracks (implicit tracks).
grid-template-rows and grid-template-columns define explicit grid tracks.
grid-template-areas defines named grid areas.
grid-area places an item within a grid.
Answer: b) grid-auto-rows and grid-auto-columns ✅
20. What does the CSS property isolation: isolate; do?
Step-by-Step Explanation
isolation: isolate; creates a new stacking context, which affects how elements are layered and composited.
It's not about backgrounds, text, or animation isolation specifically.
Answer: a) It isolates an element from the document flow, creating a new stacking context. ✅