Here are Top 100 multiple-choice questions (MCQs) focused on the HTML5 features and elements in CSS (Cascading Style Sheets) MCQs, along with their answers and explanations.
1. What does the "box-shadow" property value "inset" indicate in CSS?
- The shadow is placed outside the element
- The shadow is placed inside the element
- The shadow is applied to text
- The shadow is applied to the background
In CSS, the "box-shadow" property value "inset" indicates that the shadow is placed inside the element.
2. Which CSS property is used to control the size of an element's border on its bottom edge?
- `border-bottom-width`
- `border-width-bottom`
- `border-thickness-bottom`
- `border-bottom`
The `border-bottom-width` property in CSS is used to specify the thickness of an element's border on its bottom edge.
3. In CSS, what does the "box-sizing" property value "content-box" indicate?
- The total width and height of an element includes padding and borders
- The total width and height of an element includes only the content
- The total width and height of an element includes margins
- The total width and height of an element includes padding only
In CSS, the "box-sizing" property value "content-box" indicates that the total width and height of an element includes only the content and does not include padding and borders.
4. What does the "font-weight" property value "bold" indicate in CSS?
- The text is set to uppercase letters
- The text is set to lowercase letters
- The text is styled as italics
- The text is bold
In CSS, the "font-weight" property value "bold" indicates that the text is bold.
5. In CSS, what does the "outline" property value "auto" indicate?
- The element has a solid black outline
- The element has a dashed outline
- The outline is not applied
- The outline is automatically determined
In CSS, the "outline" property value "auto" indicates that
6. Which CSS property is used to specify the style of an element's border on its left edge?
- `border-left`
- `border-style-left`
- `border-left-style`
- `border-left-border`
The `border-left-style` property in CSS is used to specify the style of an element's border on its left edge.
7. In CSS, what does the "text-overflow" property value "ellipsis" indicate?
- Text is aligned to the left
- Text is aligned to the right
- Text is styled as italics
- Text that overflows is truncated with an ellipsis (...)
In CSS, the "text-overflow" property value "ellipsis" indicates that text that overflows its container is truncated with an ellipsis (...) to indicate that there is more content.
8. What does the "border-collapse" property value "separate" indicate in CSS?
- Borders are not applied
- Borders overlap and are adjacent
- Borders are separated and don't overlap
- Borders are collapsed into a single border
In CSS, the "border-collapse" property value "separate" indicates that borders overlap and are adjacent in a table, and they are not collapsed into a single border.
9. Which CSS selector targets all HTML elements on a web page?
- Universal Selector (*)
- Element Selector
- Class Selector
- ID Selector
The Universal Selector (*) targets all HTML elements on a web page.
10. Which CSS selector is used to target elements with a specific class name?
- Universal Selector (*)
- Element Selector
- Class Selector (.)
- ID Selector (#)
The Class Selector (.) is used to target elements with a specific class name.
11. Which CSS property is used to change the text color of an element?
- `text-color`
- `foreground-color`
- `color`
- `font-color`
The `color` property is used to change the text color of an element.
12. What is the purpose of the CSS property "font-family"?
- To define the size of text
- To specify the font of an element's text
- To control the spacing between lines of text
- To change the font style of an element
The "font-family" property is used to specify the font of an element's text.
13. Which CSS property is used to control the spacing between lines of text within an element?
- `line-height`
- `text-spacing`
- `line-spacing`
- `text-line`
The `line-height` property is used to control the spacing between lines of text within an element.
14. In CSS, which property is used to specify the background color of an element?
- `text-color`
- `foreground-color`
- `background-color`
- `color`
The `background-color` property is used to specify the background color of an element.
15. What is the purpose of the "border" property in CSS?
- To change the font size of text
- To define the size of an element
- To control the text alignment
- To specify the appearance of an element's border
The "border" property in CSS is used to specify the appearance of an element's border, including its color, style, and width.
16. Which CSS property is used to control the alignment of text within an element?
- `text-align`
- `text-center`
- `text-justify`
- `text-position`
The `text-align` property is used to control the alignment of text within an element in CSS.
17. In CSS, what is the purpose of the "margin" property?
- To set the background color of an element
- To define the space around an element
- To specify the position of an element
- To create transitions and animations
The "margin" property in CSS is used to define the space around an element, creating space between elements.
18. Which CSS selector targets elements with a specific ID attribute value?
- Universal Selector (*)
- Element Selector
- Class Selector
- ID Selector (#)
The ID Selector (#) is used to target elements with a specific ID attribute value.
19. What does the "padding" property control in CSS?
- The space between elements
- The color of the text
- The size of the text
- The space within an element's border
The "padding" property in CSS controls the space within an element's border.
20. In CSS, what is the purpose of the "position" property?
- To change the text font
- To create animations and transitions
- To specify the positioning method for an element
- To define a new HTML element
The "position" property in CSS is used to specify the positioning method for an element, such as "relative" or "absolute."
21. Which CSS property is used to specify the size of an element's text, relative to its parent element's font size?
- `font-size`
- `text-size`
- `size`
- `font-relative`
The `font-size` property is used to specify the size of an element's text, relative to its parent element's font size.
22. What is the purpose of the "float" property in CSS?
- To control the spacing between lines of text
- To align text within an element
- To specify the position of an element relative to its parent
- To change the background color of an element
The "float" property in CSS is used to specify the position of an element relative to its parent, often for creating layouts.
23. Which CSS selector is used to target the first child element of its parent?
- `.first-child`
- `.last-child`
- `.only-child`
- `.nth-child`
The `.first-child` selector targets the first child element of its parent.
24. In CSS, what is the purpose of the "z-index" property?
- To create animations and transitions
- To change the font of text
- To control the visibility of an element
- To specify the position of an element in the z-axis
The "z-index" property in CSS is used to specify the position of an element in the z-axis, affecting the stacking order of elements.
25. What is the role of the "pseudo-class" in CSS?
- To create animations and transitions
- To define custom HTML elements
- To apply styles to specific states of an element
- To select elements based on their attribute values
The "pseudo-class" in CSS is used to apply styles to specific states of an element, such as when it's hovered over or in focus.
26. Which CSS property is used to create a shadow effect for an element, providing depth and dimension?
- `box-shadow`
- `text-shadow`
- `element-shadow`
- `shadow-effect`
The `box-shadow` property is used to create a shadow effect for an element, providing depth and dimension in CSS.
27. What is the purpose of the "media query" in CSS?
- To define a new media type
- To specify the font size of text
- To create transitions and animations
- To apply styles based on the device's screen size and features
The purpose of a "media query" in CSS is to apply styles based on the device's screen size and features, making web pages responsive to different devices.
28. Which CSS property is used to control the transparency of an element, making it partially see-through?
- `opacity`
- `visibility`
- `transparency`
- `background-opacity`
The `opacity` property is used to control the transparency of an element, making it partially see-through.
29. What is the role of the "pseudo-element" in CSS?
- To create animations and transitions
- To select elements based on their attribute values
- To apply styles to a part of an element's content
- To define custom HTML elements
The "pseudo-element" in CSS is used to apply styles to a part of an element's content, such as the first line or first letter.
30. Which CSS property is used to specify the space between the content and the border of an element?
- `margin`
- `padding`
- `border-spacing`
- `spacing`
The `padding` property is used to specify the space between the content and the border of an element in CSS.
31. In CSS, what is the purpose of the "overflow" property?
- To define the size of an element
- To create a shadow effect
- To control the visibility of an element
- To specify how content overflows an element's box
The "overflow" property in CSS is used to specify how content overflows an element's box and how it is displayed (e.g., scrollbars).
32. What is the CSS property used to control the indentation of the first line of text within an element?
- `line-indent`
- `text-indent`
- `first-line-indent`
- `indentation`
The `text-indent` property is used to control the indentation of the first line of text within an element.
33. Which CSS property is used to create rounded corners for an element's box?
- `border-radius`
- `box-corners`
- `corner-radius`
- `border-rounding`
The `border-radius` property is used to create rounded corners for an element's box in CSS.
34. Which CSS property is used to specify the thickness of an element's border?
- `border-thickness`
- `border-width`
- `border-size`
- `border-strength`
The `border-width` property is used to specify the thickness of an element's border.
35. What is the role of the "pseudo-class" `.hover` in CSS?
- It targets the first child element
- It selects elements based on their attribute values
- It applies styles when an element is hovered over
- It defines custom HTML elements
The `.hover` pseudo-class in CSS is used to apply styles when an element is hovered over by the cursor.
36. In CSS, which property is used to specify the style of an element's border?
- `border-style`
- `border-design`
- `border-appearance`
- `border-look`
The `border-style` property is used to specify the style of an element's border, such as "solid" or "dotted."
37. What does the "display" property control in CSS?
- The visibility of an element
- The size of text
- The alignment of text
- How an element is rendered on the page
The "display" property in CSS controls how an element is rendered on the page, affecting its layout behavior.
38. Which CSS property is used to set the text to uppercase or lowercase letters?
- `text-transform`
- `font-transform`
- `case-transform`
- `text-style`
The `text-transform` property is used to set the text to uppercase or lowercase letters, or to capitalize the first letter of each word.
39. In CSS, what is the purpose of the "position" value "relative"?
- It removes an element from the document flow
- It specifies that an element is positioned relative to its normal position
- It centers an element on the page
- It hides an element from view
In CSS, the "position" value "relative" specifies that an element is positioned relative to its normal position in the document flow.
40. What is the CSS property used to set the text to be italic or oblique?
- `font-style`
- `text-style`
- `italicize`
- `text-italic`
The `font-style` property is used to set the text to be italic or oblique.
41. Which CSS selector targets the last child element of its parent?
- `.last-child`
- `.first-child`
- `.only-child`
- `.nth-child`
The `.last-child` selector targets the last child element of its parent.
42. In CSS, what does the "clear" property control?
- The color of the text
- The positioning of elements
- The space between lines of text
- How floating elements are cleared
In CSS, the "clear" property controls how floating elements are cleared around an element.
43. What does the "visibility" property control in CSS?
- The display style of an element
- The font size of text
- The text color
- The space between lines of text
The "visibility" property in CSS controls the display style of an element, making it visible or hidden.
44. Which CSS property is used to specify the size of an element's text, relative to the viewport?
- `font-size`
- `text-size`
- `viewport-size`
- `relative-size`
The `font-size` property is used to specify the size of an element's text, relative to the viewport or its parent element.
45. In CSS, what is the purpose of the "text-decoration" property?
- To control the alignment of text
- To create animations and transitions
- To specify the appearance of text decorations such as underlines
- To change the font of text
The "text-decoration" property in CSS is used to specify the appearance of text decorations such as underlines, overlines, and line-through.
46. What is the purpose of the "box-sizing" property in CSS?
- To change the font style of text
- To specify the visibility of an element
- To control the size of a box
- To define how the total width and height of an element is calculated
The "box-sizing" property in CSS is used to define how the total width and height of an element is calculated, including padding and borders.
47. Which CSS property is used to set the background image of an element?
- `background-image`
- `image-url`
- `background-picture`
- `image-source`
The `background-image` property is used to set the background image of an element.
48. What is the role of the "pseudo-element" `..before` in CSS?
- To select elements based on their attribute values
- To create animations and transitions
- To apply styles before the content of an element
- To define custom HTML elements
The `..before` pseudo-element in CSS is used to apply styles before the content of an element, often for adding decorative content.
49. Which CSS property is used to control the size of an element's font?
- `font-size`
- `text-size`
- `size`
- `font-relative`
The `font-size` property is used to control the size of an element's font.
50. What is the purpose of the "letter-spacing" property in CSS?
- To control the alignment of text
- To specify the distance between characters in text
- To set the text to uppercase or lowercase
- To change the font style of an element
The "letter-spacing" property in CSS is used to specify the distance between characters in text.
51. Which CSS property is used to control the thickness of an element's border?
- `border-thickness`
- `border-width`
- `border-size`
- `border-strength`
The `border-width` property is used to control the thickness of an element's border.
52. What is the role of the "pseudo-element" `..after` in CSS?
- To create animations and transitions
- To apply styles after the content of an element
- To define custom HTML elements
- To select elements based on their attribute values
The `..after` pseudo-element in CSS is used to apply styles after the content of an element, often for adding decorative content.
53. In CSS, what does the "border-collapse" property control?
- The alignment of text
- The visibility of an element
- The spacing between cells in a table
- The size of the text
In CSS, the "border-collapse" property controls the spacing between cells in a table.
54. Which CSS property is used to specify the color of an element's border?
- `border-color`
- `border-style`
- `border-width`
- `border`
The `border-color` property is used to specify the color of an element's border.
55. What is the purpose of the "font-weight" property in CSS?
- To set the text to uppercase or lowercase letters
- To control the size of the text
- To change the font style of an element
- To specify the thickness of the font
The "font-weight" property in CSS is used to specify the thickness or boldness of the font.
56. In CSS, what does the "cursor" property control?
- The size of the text
- The positioning of elements
- The visibility of an element
- The appearance of the mouse cursor when hovering over an element
In CSS, the "cursor" property controls the appearance of the mouse cursor when hovering over an element.
57. Which CSS property is used to create rounded corners for an element's border?
- `border-radius`
- `box-corners`
- `corner-radius`
- `border-rounding`
The `border-radius` property is used to create rounded corners for an element's border in CSS.
58. What is the purpose of the "word-spacing" property in CSS?
- To control the alignment of text
- To specify the distance between words in text
- To set the text to uppercase or lowercase
- To change the font style of an element
The "word-spacing" property in CSS is used to specify the distance between words in text.
59. In CSS, what does the "text-align" property control?
- The size of the text
- The color of the text
- The alignment of text within an element
- The visibility of an element
In CSS, the "text-align" property controls the alignment of text within an element.
60. Which CSS property is used to specify the thickness of an element's font characters?
- `font-strength`
- `font-width`
- `font-size`
- `font-weight`
The `font-weight` property in CSS is used to specify the thickness of an element's font characters.
61. What is the purpose of the "box-shadow" property in CSS?
- To control the spacing between lines of text
- To create animations and transitions
- To apply a shadow effect to an element
- To change the background color of an element
The "box-shadow" property in CSS is used to apply a shadow effect to an element, providing depth and dimension.
62. In CSS, what is the purpose of the "visibility" property?
- To change the font size of text
- To specify the text color
- To control the visibility of an element
- To define the size of an element
In CSS, the "visibility" property controls the visibility of an element, making it visible or hidden.
63. Which CSS property is used to control the alignment of an element's background image?
- `background-position`
- `background-image`
- `background-align`
- `background-style`
The `background-position` property is used to control the alignment of an element's background image.
64. In CSS, what does the "line-height" property control?
- The size of the text
- The color of the text
- The spacing between lines of text
- The alignment of text
In CSS, the "line-height" property controls the spacing between lines of text within an element.
65. What is the role of the "pseudo-class" `.focus` in CSS?
- To select elements based on their attribute values
- To create animations and transitions
- To apply styles when an element is clicked
- To define custom HTML elements
The `.focus` pseudo-class in CSS is used to apply styles when an element is clicked or focused by a user.
66. Which CSS property is used to create a dashed or dotted border style for an element?
- `border-style`
- `border-design`
- `border-appearance`
- `border-look`
The `border-style` property is used to create a dashed or dotted border style for an element.
67. What is the role of the "pseudo-class" `.nth-child` in CSS?
- To create animations and transitions
- To apply styles to elements based on their position within a parent element
- To define custom HTML elements
- To select elements based on their attribute values
The `.nth-child` pseudo-class in CSS is used to apply styles to elements based on their position within a parent
68. In CSS, what is the purpose of the "text-overflow" property?
- To control the alignment of text
- To create animations and transitions
- To specify how to render text that overflows its container
- To change the font style of an element
The "text-overflow" property in CSS is used to specify how to render text that overflows its container, such as with an ellipsis (...).
69. Which CSS property is used to specify the distance between the top of an element's content area and the top edge of its border box?
- `margin-top`
- `padding-top`
- `border-top`
- `top`
The `padding-top` property in CSS is used to specify the distance between the top of an element's content area and the top edge of its border box.
70. In CSS, what does the "box-sizing" property value "border-box" indicate?
- The total width and height of an element includes padding and borders
- The total width and height of an element includes only the content
- The total width and height of an element includes margins
- The total width and height of an element includes padding only
In CSS, the "box-sizing" property value "border-box" indicates that the total width and height of an element includes padding and borders.
71. What does the "border-radius" property control in CSS?
- The thickness of an element's border
- The color of an element's border
- The alignment of text within an element
- The rounding of corners on an element's box
The "border-radius" property in CSS controls the rounding of corners on an element's box, creating curved edges.
72. In CSS, what does the "background-size" property control?
- The size of an element's text
- The size of the background image of an element
- The spacing between lines of text
- The color of the text
In CSS, the "background-size" property controls the size of the background image of an element.
73. Which CSS property is used to specify the size of an element's background image, and how it should be repeated or positioned?
- `background-image`
- `background-size`
- `background-repeat`
- `background-position`
The `background-size` property in CSS is used to specify the size of an element's background image, and how it should be repeated or positioned.
74. What does the "line-height" property control in CSS?
- The size of the text
- The spacing between words in text
- The spacing between lines of text
- The color of the text
The "line-height" property in CSS controls the spacing between lines of text within an element.
75. In CSS, what is the purpose of the "outline" property?
- To create a shadow effect
- To control the visibility of an element
- To specify a visible border around an element
- To create animations and transitions
In CSS, the "outline" property is used to specify a visible border around an element, typically used for accessibility and focus styles.
76. Which CSS property is used to set the text to uppercase letters?
- `text-transform`
- `font-transform`
- `uppercase`
- `text-style`
The `text-transform` property is used to set the text to uppercase letters.
77. In CSS, what does the "background-attachment" property control?
- The positioning of elements
- The visibility of an element
- The background image's attachment behavior
- The thickness of an element's border
In CSS, the "background-attachment" property controls the background image's attachment behavior, such as whether it scrolls with the content or remains fixed.
78. What does the "opacity" property control in CSS?
- The thickness of an element's border
- The visibility of an element
- The alignment of text
- The size of the text
The "opacity" property in CSS controls the visibility of an element, making it partially see-through.
79. In CSS, what does the "box-shadow" property value "inset" indicate?
- The shadow is placed outside the element
- The shadow is placed inside the element
- The shadow is not applied
- The shadow is applied to text
In CSS, the "box-shadow" property value "inset" indicates that the shadow is placed inside the element.
80. Which CSS property is used to specify the thickness of an element's border on its top edge?
- `border-top-width`
- `border-width-top`
- `border-thickness-top`
- `border-top`
The `border-top-width` property in CSS is used to specify the thickness of an element's border on its top edge.
81. What is the purpose of the "box-shadow" property value "none" in CSS?
- To apply a shadow effect
- To create animations and transitions
- To remove the shadow from an element
- To add an outer shadow to an element
The "box-shadow" property value "none" in CSS is used to remove the shadow from an element.
82. Which CSS property is used to control the rendering of an element's background image?
- `background-image`
- `background-size`
- `background-repeat`
- `background-clip`
The `background-clip` property in CSS is used to control the rendering of an element's background image.
83. In CSS, what does the "font-style" property value "italic" indicate?
- The text is set to uppercase letters
- The text is set to lowercase letters
- The text is styled as italics
- The text is underlined
In CSS, the "font-style" property value "italic" indicates that the text is styled as italics.
84. What does the "background-attachment" property value "fixed" indicate in CSS?
- The background image scrolls with the content
- The background image is not attached
- The background image is attached to the element
- The background image remains fixed as the content scrolls
In CSS, the "background-attachment" property value "fixed" indicates that the background image remains fixed as the content scrolls, creating a parallax effect.
85. In CSS, what does the "outline" property value "none" indicate?
- No outline is applied
- The element is hidden
- The element has a solid black outline
- The element has a dashed outline
In CSS, the "outline" property value "none" indicates that no outline is applied to the element.
86. Which CSS property is used to control the space between characters in a text element?
- `letter-spacing`
- `word-spacing`
- `text-spacing`
- `character-spacing`
The `letter-spacing` property in CSS is used to control the space between characters in a text element.
87. In CSS, what does the "overflow" property value "hidden" indicate?
- The element is hidden
- The element is transparent
- Content that overflows the element is hidden
- Content that overflows the element is displayed with scrollbars
In CSS, the "overflow" property value "hidden" indicates that content that overflows the element is hidden from view.
88. Which CSS property is used to specify the thickness of an element's border on its right edge?
- `border-right-width`
- `border-width-right`
- `border-thickness-right`
- `border-right`
The `border-right-width` property in CSS is used to specify the thickness of an element's border on its right edge.
89. In CSS, what is the purpose of the "background-origin" property?
- To control the rendering of an element's background image
- To specify the distance between lines of text
- To specify where the background image is positioned
- To specify the origin of the background positioning area
The "background-origin" property in CSS is used to specify the origin of the background positioning area, determining where the background image is positioned within an element.
90. Which CSS property is used to set the text to lowercase letters?
- `text-transform`
- `font-transform`
- `lowercase`
- `text-style`
The `text-transform` property is used to set the text to lowercase letters.
91. In CSS, what does the "font-variant" property control?
- The thickness of an element's font characters
- The rendering of small caps
- The visibility of an element
- The alignment of text
In CSS, the "font-variant" property controls the rendering of small caps for text.
92. What does the "border-collapse" property value "collapse" indicate in CSS?
- Borders are not applied
- Borders overlap and are adjacent
- Borders are separated and don't overlap
- Borders are collapsed into a single border
In CSS, the "border-collapse" property value "collapse" indicates that borders are separated and don't overlap in a table.
93. Which CSS property is used to specify the background color of an element?
- `background-image`
- `background-color`
- `background-style`
- `background-fill`
The `background-color` property is used to specify the background color of an element.
94. In CSS, what does the "text-decoration" property value "underline" indicate?
- Text is styled as italics
- Text has an underline decoration
- Text is set to uppercase letters
- Text is set to lowercase letters
In CSS, the "text-decoration" property value "underline" indicates that text has an underline decoration.
95. What is the purpose of the "z-index" property in CSS?
- To control the visibility of an element
- To create animations and transitions
- To specify the rendering order of positioned elements
- To change the background color of an element
The "z-index" property in CSS is used to specify the rendering order of positioned elements, controlling which element appears in front of others.
96. Which CSS property is used to specify the thickness of an element's border on its left edge?
- `border-left-width`
- `border-width-left`
- `border-thickness-left`
- `border-left`
The `border-left-width` property in CSS is used to specify the thickness of an element's border on its left edge.
97. In CSS, what does the "text-align" property value "center" indicate?
- Text is aligned to the left
- Text is aligned to the right
- Text is centered horizontally
- Text is justified
In CSS, the "text-align" property value "center" indicates that text is centered horizontally within an element.
98. What is the role of the "pseudo-class" `.checked` in CSS?
- To create animations and transitions
- To select elements based on their attribute values
- To apply styles to selected radio buttons and checkboxes
- To define custom HTML elements
The `.checked` pseudo-class in CSS is used to apply styles to selected radio buttons and checkboxes.
99. Which CSS property is used to control the space between lines of text within an element?
- `line-spacing`
- `text-line`
- `line-height`
- `spacing-line`
The `line-height` property in CSS is used to control the space between lines of text within an element.
100. In CSS, what does the "text-decoration" property value "none" indicate?
- Text has an underline decoration
- Text has an overline decoration
- Text has a line-through decoration
- No text decorations are applied
In CSS, the "text-decoration" property value "none" indicates that no text decorations are applied to the text.