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:
<h1style="color:blue;text-align:center;">This is a heading</h1><pstyle="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?
divp {
}
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!
Comments
Post a Comment
Leave Comment