Welcome to the CSS Quiz for beginners! Test your foundational knowledge of Cascading Style Sheets (CSS) with these 35+ multiple-choice questions. Whether you’re just starting out or looking for a refresher, this quiz has got you covered.
Note that each question is followed by the correct answer and an explanation to help reinforce your knowledge.
1. What is the full form of the acronym CSS?
Answer:
Explanation:
CSS stands for Cascading Style Sheets. It's a styling language used to control the presentation of HTML documents.
2. Which property is used to change the text color of an element?
Answer:
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.
3. Which HTML attribute is used to define inline styles?
Answer:
Explanation:
The style attribute is used in HTML to define inline CSS.
4. Which of the following selectors targets all <p> elements?
Answer:
Explanation:
In CSS, tag/element selectors are used without prefixes. So, "p" targets all <p> elements.
5. How do you set the background color of an element to red?
Answer:
Explanation:
The property for setting the background color of an element is background-color.
6. Which property controls the font of an element?
Answer:
Explanation:
The font-family property specifies the font for an element.
7. How do you comment out multiple lines in CSS?
Answer:
Explanation:
In CSS, multiple lines can be commented out using /* to start the comment and */ to end it.
8. Which property adds space inside an element?
Answer:
Explanation:
Padding is used to create space around an element's content, inside of any defined borders.
9. Which of the following property is used to change the left margin of an element?
Answer:
Explanation:
The margin-left property is used to set the left margin of an element.
10. How do you make all the letters in a text uppercase?
Answer:
Explanation:
The text-transform property controls text case and capitalization.
11. How do you select all elements with the class name "intro"?
Answer:
Explanation:
In CSS, class selectors are prefixed with a dot (.). So, .intro will select all elements with the class name "intro".
12. How do you select an element with the ID "header"?
Answer:
Explanation:
In CSS, ID selectors are prefixed with a hash (#). So, #header will select the element with the ID "header".
13. Which property controls the text size?
Answer:
Explanation:
The font-size property is used to control the size of the text.
14. How do you display hyperlinks without an underline?
Answer:
Explanation:
The text-decoration property is used to set the decoration of the text. Setting it to none removes the underline from hyperlinks.
15. Which property aligns the text of an element to the center?
Answer:
Explanation:
The text-align property is used to specify the horizontal alignment of text in an element.
16. Which property adds space between an element and its surrounding elements?
Answer:
Explanation:
The margin property is used to create space around elements, outside of any defined borders.
17. What is the default value of the position property?
Answer:
Explanation:
The default value of the position property is static, which means the element is not positioned in any special way.
18. Which of the following will hide an element by making it completely transparent but still occupying space?
Answer:
Explanation:
Setting opacity to 0 will make an element completely transparent but still taking up space in the layout.
19. What is the purpose of the z-index property?
Answer:
Explanation:
The z-index property specifies the stack order of an element. An element with a greater stack order is always in front of another element with a lower stack order.
20. Which value of the overflow property will cause scrollbars to always appear?
Answer:
Explanation:
Setting overflow to scroll will always display scrollbars, whether they're needed or not.
21. Which CSS property defines the space between the content of an element and its border?
Answer:
Explanation:
Padding is the space between the content of an element and its border.
22. How do you specify a border for all four sides that is medium, dashed, and red?
Answer:
Explanation:
The shorthand border property allows you to set the width, style, and color of all four sides simultaneously.
23. How do you apply a class .selected to a <div> element in HTML?
Answer:
Explanation:
To apply a class to an element in HTML, you use the class attribute with the class name.
24. Which property adjusts the space between the individual characters of a text?
Answer:
Explanation:
The letter-spacing property adjusts the space between the characters of a text.
25. Which of the following is NOT a CSS framework?
Answer:
Explanation:
Angular is a JavaScript framework for building web applications. It's not a CSS framework.
26. Which CSS property is used for specifying the shadows of a box?
Answer:
Explanation:
The box-shadow property is used to add shadow effects around an element's frame.
27. Which of the following is a shorthand property for setting margin values in the order top, right, bottom, left?
Answer:
Explanation:
The margin shorthand follows the sequence: top, right, bottom, left.
28. What will flex: 1 do in a flex container?
Answer:
Explanation:
flex: 1 is shorthand that specifies the ability of a flex item to grow if necessary. It's equivalent to setting flex-grow: 1.
29. How do you add a background color for all <ul> elements?
Answer:
Explanation:
You can directly use the element's name as the selector to style it.
30. Which of the following properties will not affect an inline element?
Answer:
Explanation:
Inline elements do not respect the width and height properties, they wrap content and don’t force line breaks.
31. How can you add a comment in a CSS file?
Answer:
Explanation:
In CSS, comments are added by wrapping the text between /* and */.
32. Which property is used to add a background image?
Answer:
Explanation:
The background-image property is used to specify a background image.
33. Which property is used to create rounded corners for an element?
Answer:
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.
34. What is the purpose of the display: none; property in CSS?
Answer:
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.
35. What is the purpose of the float property in CSS?
Answer:
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.