MCQs Of Class 1: Introduction to CSS
MCQs (Multiple Choice Questions) on CSS Concepts
1. What does CSS stand for?
- a) Computer Style Sheets
- b) Cascading Style Sheets
- c) Creative Style Sheets
- d) Color Style Sheets
Answer: b) Cascading Style Sheets
Explanation: CSS stands for Cascading Style Sheets, which is used to style HTML elements on a webpage.
2. Which of the following is NOT a valid CSS property?
- a) color
- b) background-color
- c) font-size
- d) text-style
Answer: d) text-style
Explanation: There is no text-style property in CSS. The correct property is font-style.
3. How do you change the text color in CSS?
- a) text-color
- b) color
- c) text-style
- d) font-color
Answer: b) color
Explanation: The correct property to change the text color is color.
4. Which of the following is an example of inline CSS?
- a) <style>p { color: red; }</style>
- b) <link rel="stylesheet" href="style.css">
- c) <h1 style="color: blue;">Welcome</h1>
- d) <div class="container"></div>
Answer: c) <h1 style="color: blue;">Welcome</h1>
Explanation: Inline CSS is written directly in the element using the style attribute.
5. Where do you write internal CSS in an HTML document?
- a) In the <head> section
- b) In the <body> section
- c) In the external .css file
- d) In the style tag outside the document
Answer: a) In the <head> section
Explanation: Internal CSS is written within the <style> tag in the <head> section of the HTML document.
6. Which CSS selector is used to select an element with a specific class?
- a) #class-name
- b) .class-name
- c) class-name
- d) element.class-name
Answer: b) .class-name
Explanation: A class selector is denoted by a period (.) before the class name.
7. What is the purpose of the float property in CSS?
- a) To make an element float over the page
- b) To position an element to the left or right of its container
- c) To add space between elements
- d) To rotate an element
Answer: b) To position an element to the left or right of its container
Explanation: The float property is used to push an element to the left or right within its container.
8. Which of the following is an example of external CSS?
- a) <link rel="stylesheet" href="styles.css">
- b) <style>body { background-color: yellow; }</style>
- c) <h1 style="color: blue;">Hello</h1>
- d) <p class="text">This is a paragraph.</p>
Answer: a) <link rel="stylesheet" href="styles.css">
Explanation: External CSS is linked using the <link> tag, referencing an external .css file.
9. Which CSS property is used to set the background color of an element?
- a) color
- b) background-color
- c) background-image
- d) bg-color
Answer: b) background-color
Explanation: The background-color property sets the background color of an element.
10. How do you add a border around a paragraph in CSS?
- a) border: 1px solid black;
- b) border: solid 1px black;
- c) border-color: black;
- d) Both a and b
Answer: d) Both a and b
Explanation: Both border: 1px solid black; and border: solid 1px black; are correct ways to add a border.
11. What does the CSS padding property do?
- a) Adds space between the element's content and border
- b) Adds space between the element's border and its margin
- c) Adds space inside the element's content
- d) Adds space outside the element's border
Answer: a) Adds space between the element's content and border
Explanation: The padding property adds space between the content of the element and its border.
12. Which property is used to change the font size in CSS?
- a) font-type
- b) font-size
- c) text-size
- d) size
Answer: b) font-size
Explanation: The font-size property is used to set the size of the font.
13. How do you apply multiple CSS styles to a single element in the same rule?
- a) Separate the styles with commas
- b) Separate the styles with semicolons
- c) Separate the styles with colons
- d) Separate the styles with spaces
Answer: b) Separate the styles with semicolons
Explanation: CSS styles are separated by semicolons inside the rule block.
14. Which CSS property is used to make text bold?
- a) font-weight
- b) font-style
- c) text-decoration
- d) text-weight
Answer: a) font-weight
Explanation: The font-weight property is used to make text bold.
15. How do you select all <p> tags in a CSS file?
- a) .p
- b) #p
- c) p
- d) <p>
Answer: c) p
Explanation: To select all <p> tags, you simply write p as the selector in the CSS.
16. Which CSS property is used to control the layout of elements in a container?
- a) display
- b) position
- c) layout
- d) box-model
Answer: a) display
Explanation: The display property controls how an element is displayed, e.g., as a block, inline, or flex.
17. What is the default value of the display property?
- a) block
- b) inline
- c) flex
- d) none
Answer: a) block
Explanation: The default value of the display property for most elements is block.
18. Which of the following is NOT a valid unit in CSS?
- a) px
- b) em
- c) percentage
- d) usd
Answer: d) usd
Explanation: usd is not a valid unit in CSS. Valid units include px, em, %, etc.
19. How do you change the font family of a text in CSS?
- a) font-family
- b) text-family
- c) family
- d) font-type
Answer: a) font-family
Explanation: The font-family property is used to change the font of a text element.
20. How do you make a paragraph text italic using CSS?
- a) font-weight: italic;
- b) text-style: italic;
- c) font-style: italic;
- d) text-decoration: italic;
Answer: c) font-style: italic;
Explanation: The font-style property with the value italic is used to make text italic.
21. Which of the following CSS properties is used to create a space between the content and the border of an element?
- a) margin
- b) padding
- c) border-spacing
- d) space
Answer: b) padding
Explanation: The padding property creates space between the element's content and its border.
22. Which of the following CSS properties is used to set the width of an element's border?
- a) border-thickness
- b) border-width
- c) border-size
- d) border-height
Answer: b) border-width
Explanation: The border-width property is used to set the thickness of an element's border.
23. What does the z-index property in CSS control?
- a) The width of an element
- b) The position of an element
- c) The stacking order of elements
- d) The color of an element
Answer: c) The stacking order of elements
Explanation: The z-index property controls the stacking order of elements, where higher values are displayed in front of lower values.
24. What is the purpose of the clear property in CSS?
- a) To clear text inside an element
- b) To clear the float of an element
- c) To clear the border of an element
- d) To remove padding from an element
Answer: b) To clear the float of an element
Explanation: The clear property is used to specify that no floating elements should be on the left or right of an element.
25. What is the CSS property position: absolute; used for?
- a) To make an element scrollable
- b) To position an element relative to its nearest positioned ancestor
- c) To position an element at the top left of the screen
- d) To align an element horizontally in the center
Answer: b) To position an element relative to its nearest positioned ancestor
Explanation: position: absolute; positions an element relative to the nearest ancestor element with a position other than static.
26. Which CSS property is used to control the opacity of an element?
- a) transparency
- b) opacity
- c) visibility
- d) display
Answer: b) opacity
Explanation: The opacity property controls the transparency of an element, where 0 is completely transparent and 1 is fully opaque.
27. Which of the following is a valid way to define a comment in CSS?
- a) <!-- This is a comment -->
- b) /* This is a comment */
- c) // This is a comment
- d) # This is a comment
Answer: b) /* This is a comment */
Explanation: In CSS, comments are written between /* and */.
28. What is the purpose of the box-sizing property in CSS?
- a) To define the width of an element
- b) To set how padding and border are included in the element's total width and height
- c) To set the size of the box around an element
- d) To make a box automatically adjust its size
Answer: b) To set how padding and border are included in the element's total width and height
Explanation: The box-sizing property defines how the total width and height of an element are calculated, either including or excluding padding and border.
29. Which property is used to make the background image of an element repeat in CSS?
- a) background-repeat
- b) repeat-background
- c) background-image-repeat
- d) image-repeat
Answer: a) background-repeat
Explanation: The background-repeat property is used to control the repetition of the background image.
30. Which of the following CSS properties is used to set the transparency of an element?
- a) opacity
- b) visibility
- c) transparency
- d) hidden
Answer: a) opacity
Explanation: The opacity property is used to control the transparency level of an element.
31. How can you make text center-aligned using CSS?
- a) text-align: left;
- b) text-align: right;
- c) text-align: center;
- d) align-text: center;
Answer: c) text-align: center;
Explanation: The text-align property with the value center centers the text inside the element.
32. Which CSS property is used to change the space between lines of text?
- a) line-height
- b) text-indent
- c) letter-spacing
- d) text-spacing
Answer: a) line-height
Explanation: The line-height property is used to control the space between lines of text.
33. Which CSS property allows you to set multiple columns of text?
- a) columns
- b) column-width
- c) multi-column
- d) column-count
Answer: d) column-count
Explanation: The column-count property allows you to define the number of columns of text.
34. Which of the following units is relative to the font size of the element in CSS?
- a) px
- b) em
- c) %
- d) rem
Answer: b) em
Explanation: The em unit is relative to the font size of the element.
35. What does the text-transform property in CSS do?
- a) It transforms text into an image
- b) It controls the direction of the text
- c) It changes the case of the text
- d) It adjusts the spacing between characters
Answer: c) It changes the case of the text
Explanation: The text-transform property is used to control the capitalization of text (e.g., uppercase, lowercase, capitalize).
36. Which CSS property is used to add space between elements?
- a) margin
- b) padding
- c) space
- d) gap
Answer: a) margin
Explanation: The margin property is used to add space outside the border of an element.
37. How do you center an element horizontally using Flexbox?
- a) justify-content: left;
- b) align-items: center;
- c) justify-content: center;
- d) flex-align: center;
Answer: c) justify-content: center;
Explanation: The justify-content: center; property centers items horizontally in a flex container.
38. Which CSS property is used to create a shadow effect for text?
- a) text-shadow
- b) box-shadow
- c) shadow
- d) font-shadow
Answer: a) text-shadow
Explanation: The text-shadow property is used to create shadow effects around text.
39. Which of the following CSS properties can be used to set the border of an element?
- a) border-style
- b) border-width
- c) border-color
- d) All of the above
Answer: d) All of the above
Explanation: The border-style, border-width, and border-color properties are used to define the complete border of an element.
40. What does the position: relative; property do in CSS?
- a) It positions the element relative to its normal position
- b) It positions the element at the top left corner
- c) It positions the element at the center of the page
- d) It makes the element absolute
Answer: a) It positions the element relative to its normal position
Explanation: The position: relative; property moves an element relative to its normal position without affecting other elements.
41. What is the default display property value of the <div> element?
- a) inline
- b) block
- c) inline-block
- d) flex
Answer: b) block
Explanation: By default, <div> elements are block-level elements, meaning they take up the full width available.
42. Which CSS property is used to control the visibility of an element?
- a) visibility
- b) display
- c) opacity
- d) hidden
Answer: a) visibility
Explanation: The visibility property controls whether an element is visible or hidden.
43. Which CSS property is used to control the font weight of text?
- a) font-weight
- b) font-size
- c) font-style
- d) text-weight
Answer: a) font-weight
Explanation: The font-weight property controls the thickness of the font.
44. Which CSS property is used to set the space between words in text?
- a) word-spacing
- b) letter-spacing
- c) text-spacing
- d) line-spacing
Answer: a) word-spacing
Explanation: The word-spacing property adds space between words in a text.
45. What is the correct syntax to select an element with the id "header" in CSS?
- a) #header
- b) .header
- c) header
- d) id="header"
Answer: a) #header
Explanation: The # symbol is used to select an element by its ID in CSS.
46. Which property is used to set the font size of text in CSS?
- a) font-size
- b) font-style
- c) text-size
- d) size
Answer: a) font-size
Explanation: The font-size property sets the size of the text.
47. Which CSS property is used to create a flex container?
- a) display: flex;
- b) display: block;
- c) display: grid;
- d) flex: true;
Answer: a) display: flex;
Explanation: The display: flex; property creates a flex container, allowing for flexible layout of child elements.
48. What does the @media rule in CSS allow you to do?
- a) It allows you to add media files to your webpage
- b) It allows you to apply styles based on the viewport size or device
- c) It allows you to animate elements
- d) It allows you to link media to the document
Answer: b) It allows you to apply styles based on the viewport size or device
Explanation: The @media rule allows you to create responsive designs by applying styles depending on the screen size or device features.
49. Which CSS property is used to change the background color of an element?
- a) background-color
- b) background-image
- c) color
- d) background
Answer: a) background-color
Explanation: The background-color property is used to change the background color of an element.
50. Which of the following is used to define an element that should not be displayed in the document flow but still takes up space in the layout?
- a) display: none;
- b) visibility: hidden;
- c) position: absolute;
- d) display: inline;
Answer: b) visibility: hidden;
Explanation: The visibility: hidden; property hides an element but still occupies space in the layout.
No comments:
Post a Comment