This comprehensive collection of Cascading Style Sheets (CSS) MCQs is specifically crafted to enhance understanding of the fundamental concepts and techniques that govern web design and styling. Covering key topics such as selectors, properties, layout techniques, responsive design, and CSS frameworks, these questions aim to reinforce both theoretical knowledge and practical application. Ideal for students studying web development, graphic design, or computer science, as well as professionals looking to refresh their skills or prepare for certification exams, this set focuses on the essential elements that contribute to effective and visually appealing web pages.
Who should practice Cascading Style Sheets MCQs?
- Students preparing for exams in web development, graphic design, or related disciplines.
- Professionals seeking to deepen their understanding of CSS for career advancement in web design and development.
- Candidates preparing for certification exams in web technologies or front-end development.
- Individuals looking to refresh their knowledge of CSS concepts and best practices for modern web design.
- Anyone interested in building a strong foundation in CSS to pursue further studies or a career in web development, user experience (UX) design, or digital media.
1. Which CSS property is used to change the text color of an element?
a) font-color
b) text-color
c) color
d) background-color
View AnswerC
2. How do you select an element with id “header” in CSS?
a) .header
b) #header
c) header
d) *header
View AnswerB
3. Which CSS property is used to change the background color of an element?
a) bgcolor
b) background-color
c) color
d) background
View AnswerB
4. What is the correct CSS syntax to make all the paragraphs bold?
a) p {font-weight: bold;}
b) p {text-weight: bold;}
c) p {font: bold;}
d) p {text: bold;}
View AnswerA
5. How do you add a comment in a CSS file?
a) // this is a comment
b) <!– this is a comment –>
c) /c) /* this is a comment*
d) ‘ this is a comment
View AnswerC
6. Which CSS property controls the text size?
a) font-size
b) text-size
c) font-style
d) text-style
View AnswerA
7. How do you select all p elements inside a div element in CSS?
a) div p
b) div > p
c) div + p
d) div ~ p
View AnswerA
8. What is the default value of the position property in CSS?
a) static
b) relative
c) absolute
d) fixed
View AnswerA
9. How do you make each word in a text start with a capital letter in CSS?
a) text-transform: capitalize;
b) text-transform: uppercase;
c) text-transform: lowercase;
d) text-transform: initial;
View AnswerA
10. Which property is used to change the font of an element?
a) font-family
b) font-style
c) font-weight
d) font-text
View AnswerA
11. How do you set the width of an element to 100% of its containing element?
a) width: 100%;
b) width: 100px;
c) width: contain;
d) width: container;
View AnswerA
12. Which CSS property is used to change the space between letters?
a) letter-spacing
b) spacing
c) character-spacing
d) text-spacing
View AnswerA
13. How do you select the first child element of a div in CSS?
a) div:first-child
b) div:first-element
c) div:first
d) div > first-child
View AnswerA
14. What is the use of the z-index property in CSS?
a) To change the stacking order of elements
b) To change the transparency of elements
c) To change the visibility of elements
d) To change the position of elements
View AnswerA
15. Which CSS property is used to change the left margin of an element?
a) padding-left
b) margin-left
c) margin
d) padding
View AnswerB
16. How do you add a shadow to a text in CSS?
a) text-shadow
b) font-shadow
c) text-decoration
d) font-effect
View AnswerA
17. How do you make an element invisible in CSS?
a) visibility: hidden;
b) display: none;
c) Both a and b
d) opacity: 0;
View AnswerC
18. What does CSS stand for?
a) Computer Style Sheets
b) Creative Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets
View AnswerC
19. Which property is used to specify the height of a line in CSS?
a) line-height
b) height
c) line-width
d) line-size
View AnswerA
20. How do you align text to the center of an element in CSS?
a) text-align: center;
b) vertical-align: center;
c) align: center;
d) text-center: true;
View AnswerA
21. What is the correct syntax for using a class selector in CSS?
a) .classname
b) #classname
c) classname
d) *classname
View AnswerA
22. Which property is used to create space between the border and the content of an element?
a) margin
b) padding
c) border-spacing
d) content-spacing
View AnswerB
23. How do you make the background image not repeat in CSS?
a) background-repeat: no-repeat;
b) background-image: no-repeat;
c) background-no-repeat: true;
d) background-repeat: none;
View AnswerA
24. Which CSS property is used to change the style of the list marker?
a) list-style-type
b) list-type
c) marker-style
d) bullet-style
View AnswerA
25. How do you change the cursor into a hand when a user hovers over a link in CSS?
a) cursor: pointer;
b) cursor: hand;
c) cursor: link;
d) cursor: hover;
View AnswerA
26. Which CSS property is used to specify the transparency of an element?
a) transparency
b) opacity
c) filter
d) visibility
View AnswerB
27. How do you create a dotted border in CSS?
a) border-style: dotted;
b) border-type: dotted;
c) border-decoration: dotted;
d) border: dotted;
View AnswerA
28. How can you increase the space between the lines of text in CSS?
a) line-height
b) text-spacing
c) line-spacing
d) spacing
View AnswerA
29. How do you select all the elements of a certain type in CSS?
a) *
b) type
c) element
d) selector
View AnswerA
30. Which property is used to change the font of an element in CSS?
a) font-family
b) font-weight
c) font-style
d) font-variant
View AnswerA
31. How do you specify that an element should be hidden but still take up space on the page in CSS?
a) display: hidden;
b) visibility: hidden;
c) display: none;
d) visibility: none;
View AnswerB
32. Which property is used to add a background image to an element in CSS?
a) background-image
b) background
c) background-img
d) img-background
View AnswerA
33. How do you make the text italic in CSS?
a) font-weight: italic;
b) font-style: italic;
c) text-decoration: italic;
d) font-variant: italic;
View AnswerB
34. What is the correct way to apply multiple styles in CSS?
a) style1; style2; style3;
b) {style1, style2, style3}
c) {style1; style2; style3}
d) style1, style2, style3;
View AnswerC
35. How do you select an element with class “button” inside a div in CSS?
a) div .button
b) div button
c) .div .button
d) button div
View AnswerA
36. How do you change the bullet style of a list in CSS?
a) list-type
b) list-style-type
c) bullet-style
d) list-bullet
View AnswerB
37. What does the CSS property `float` do?
a) Positions an element to the left or right of its container
b) Positions an element to the top or bottom of its container
c) Centers an element in its container
d) Makes an element transparent
View AnswerA
38. How do you set the width of a border in CSS?
a) border-width
b) border-size
c) border-height
d) border-thickness
View AnswerA
39. Which CSS property controls the order of elements in a flexible container?
a) order
b) flex-order
c) arrange
d) flex-arrange
View AnswerA
40. How do you create rounded corners for an element in CSS?
a) border-radius
b) corner-radius
c) border-round
d) radius
View AnswerA
41. How do you select every element on a page in CSS?
a) .*
b) *
c) .all
d) all
View AnswerB
42. What is the purpose of the CSS `clear` property?
a) It specifies whether an element should be moved below floating elements
b) It makes an element transparent
c) It clears the contents of an element
d) It removes the margins and padding of an element
View AnswerA
43. Which CSS property is used to align items vertically in a flex container?
a) align-items
b) justify-content
c) align-content
d) vertical-align
View AnswerA
44. How do you add space between the border and the content in an element in CSS?
a) margin
b) padding
c) spacing
d) border-spacing
View AnswerB
45. Which CSS property is used to control the repetition of a background image?
a) background-repeat
b) background-repeatation
c) bg-repeat
d) image-repeat
View AnswerA
46. How do you make a list item appear as a square in CSS?
a) list-style-type: square;
b) list-style: square;
c) list-type: square;
d) list-square: true;
View AnswerA
47. How do you center an absolutely positioned element in CSS?
a) position: center;
b) margin: auto;
c) left: 50%; top: 50%; transform: translate(-50%, -50%);
d) text-align: center;
View AnswerC
48. Which property is used to set the space between characters in CSS?
a) letter-spacing
b) word-spacing
c) text-spacing
d) character-spacing
View AnswerA
49. What is the correct way to use a pseudo-class to style visited links in CSS?
a) a:visited
b) a visited
c) a[visited]d) a(visited)
View AnswerA
50. How do you set the maximum width of an element in CSS?
a) max-width
b) width-max
c) maximum-width
d) element-width
View AnswerA
51. How do you set an image to fit its container in CSS?
a) object-fit: cover;
b) image-fit: cover;
c) fit: container;
d) img-fit: cover;
View AnswerA
52. Which CSS property is used to create a gap between columns in a grid layout?
a) column-gap
b) gap
c) grid-gap
d) column-spacing
View AnswerA
53. How do you set the vertical alignment of an inline or table-cell element in CSS?
a) vertical-align
b) align-vertical
c) valign
d) align
View AnswerA
54. What does the CSS `overflow` property control?
a) How content that overflows an element’s box is handled
b) How content is aligned within an element’s box
c) The spacing between elements
d) The visibility of an element
View AnswerA
55. How do you apply a linear gradient as a background in CSS?
a) background: linear-gradient();
b) background: gradient();
c) background: linear-gradient-to-right();
d) background: gradient-linear();
View AnswerA
56. How do you select an element that is the only child of its parent in CSS?
a) :only-child
b) :last-child
c) :first-child
d) :single-child
View AnswerA
57. Which property is used to set the indentation of the first line of text in a block in CSS?
a) text-indent
b) text-padding
c) first-line-indent
d) text-indent-first-line
View AnswerA
58. How do you set the font size to 16 pixels in CSS?
a) font-size: 16px;
b) font: 16px;
c) size: 16px;
d) text-size: 16px;
View AnswerA
59. How do you set the text to be underlined in CSS?
a) text-decoration: underline;
b) text-style: underline;
c) text-transform: underline;
d) text-underline: true;
View AnswerA
60. Which CSS property is used to set the size of the background image?
a) background-size
b) image-size
c) bg-size
d) size-background
View AnswerA
61. Which property is used to change the style of the cursor when hovering over an element?
a) cursor-style
b) cursor
c) hover-cursor
d) pointer
View AnswerB
62. How do you select an element that has a specific attribute in CSS?
a) element[attr]b) element{attr}
c) element.attr
d) element#attr
View AnswerA
63. What is the purpose of the `@keyframes` rule in CSS?
a) To define the behavior of an animation
b) To import another CSS file
c) To apply different styles for different screen sizes
d) To define a media query
View AnswerA
64. How do you apply a transition effect when changing a property in CSS?
a) transition: property duration timing-function;
b) animate: property duration timing-function;
c) transition: duration property timing-function;
d) animate: duration property timing-function;
View AnswerA
65. Which property is used to set the spacing between lines of text in CSS?
a) line-spacing
b) line-height
c) text-spacing
d) text-height
View AnswerB
66. How do you create a flex container in CSS?
a) display: flex;
b) display: block;
c) display: inline-flex;
d) display: flex-container;
View AnswerA
67. What is the default value of the `flex-direction` property in CSS?
a) row
b) column
c) row-reverse
d) column-reverse
View AnswerA
68. How do you make a responsive grid layout in CSS?
a) display: grid;
b) display: flex;
c) display: inline-grid;
d) display: grid-container;
View AnswerA
69. How do you specify a gap between rows in a grid layout in CSS?
a) row-gap
b) gap
c) grid-row-gap
d) row-spacing
View AnswerA
70. How do you align flex items along the main axis in a flex container in CSS?
a) justify-content
b) align-items
c) align-content
d) justify-items
View AnswerA
71. Which CSS function is used to rotate an element?
a) rotate()
b) transform()
c) skew()
d) translate()
View AnswerA
72. How do you prevent an element from being resized in CSS?
a) resize: none;
b) resize: no;
c) resize: block;
d) resize: fixed;
View AnswerA
73. What is the correct way to create a linear gradient from top to bottom in CSS?
a) background: linear-gradient(to bottom, color1, color2);
b) background: linear-gradient(top to bottom, color1, color2);
c) background: linear-gradient(to top, color1, color2);
d) background: linear-gradient(to bottom, color1, color2);
View AnswerA
74. How do you select an element that is the nth child of its parent in CSS?
a) :nth-child(n)
b) :nth-of-type(n)
c) :nth(n)
d) :child(n)
View AnswerA
75. Which property is used to create a shadow effect for a box in CSS?
a) box-shadow
b) shadow
c) box-shadow-effect
d) shadow-box
View AnswerA
76. How do you make an element take up the full height of its container in CSS?
a) height: 100%;
b) height: auto;
c) height: container;
d) height: full;
View AnswerA
77. Which CSS property is used to create space between an element’s border and its content?
a) padding
b) margin
c) spacing
d) content-spacing
View AnswerA
78. How do you set the base size of an element’s font relative to its container in CSS?
a) font-size: em;
b) font-size: px;
c) font-size: rem;
d) font-size: pt;
View AnswerC
79. What is the correct way to hide an element but still allow it to be accessible to screen readers in CSS?
a) visibility: hidden;
b) display: none;
c) position: absolute; left: -9999px;
d) opacity: 0;
View AnswerC
80. How do you apply multiple background images to an element in CSS?
a) background-image: url(image1), url(image2);
b) background: url(image1), url(image2);
c) background-images: url(image1), url(image2);
d) backgrounds: url(image1), url(image2);
View AnswerA
81. Which CSS property is used to set the space inside the border of an element?
a) padding
b) margin
c) border-spacing
d) spacing
View AnswerA
82. How do you align items along the cross axis in a flex container in CSS?
a) align-items
b) justify-content
c) align-content
d) justify-items
View AnswerA
83. Which property is used to create a gap between columns in a CSS grid layout?
a) column-gap
b) gap
c) grid-gap
d) column-spacing
View AnswerA
84. How do you set the minimum height of an element in CSS?
a) min-height
b) height-min
c) minimum-height
d) element-height
View AnswerA
85. Which property is used to define the amount of space between the borders of adjacent table cells?
a) border-spacing
b) cell-spacing
c) table-spacing
d) cell-border-spacing
View AnswerA
86. How do you select an element that is the first child of its parent in CSS?
a) :first-child
b) :nth-child(1)
c) :first-of-type
d) :child(1)
View AnswerA
87. Which CSS property is used to specify the thickness of the border?
a) border-width
b) border-thickness
c) border-size
d) border-height
View AnswerA
88. What is the correct way to apply a drop shadow to text in CSS?
a) text-shadow
b) text-effect
c) font-shadow
d) shadow-text
View AnswerA
89. How do you specify the location of an element in CSS?
a) position
b) location
c) place
d) top
View AnswerA
90. Which property is used to specify the distance between the borders of an element and its surrounding elements in CSS?
a) margin
b) padding
c) border-spacing
d) spacing
View AnswerA
91. Which HTML tag is used to link a CSS stylesheet?
A) <css>
B) <link>
C) <style>
D) <script>
View AnswerB
92. Which property is used to change the background color of an element in CSS?
A) background-color
B) color
C) bgcolor
D) background
View AnswerA
93. What is the correct syntax to select an element with the class name “example” in CSS?
A) #example
B) .example
C) *example
D) example
View AnswerB
94. Which of the following is a valid CSS comment?
A) // This is a comment
B) <!-- This is a comment -->
C) /* This is a comment */
D) # This is a comment
View AnswerC
95. How do you apply a style to all <p> elements in CSS?
A) p { ... }
B) p.all { ... }
C) *p { ... }
D) #p { ... }
View AnswerA
96. Which CSS property controls the text size?
A) font-size
B) text-size
C) text-style
D) font-style
View AnswerA
97. What is the default value of the position property in CSS?
A) relative
B) absolute
C) fixed
D) static
View AnswerD
98. Which CSS property is used to set the space between elements?
A) padding
B) margin
C) spacing
D) border
View AnswerB
99. In CSS, what does the z-index property control?
A) The size of an element
B) The opacity of an element
C) The stack order of elements
D) The visibility of an element
View AnswerC
100. Which of the following CSS selectors is used to select an element with the ID “header”?
A) header
B) .header
C) #header
D) *header
View AnswerC
101. What does the display property control in CSS?
A) The color of the element
B) The visibility of the element
C) The layout behavior of the element
D) The size of the element
View AnswerC
102. How can you make a list item appear horizontally in CSS?
A) list-style: horizontal;
B) display: inline;
C) float: left;
D) text-align: horizontal;
View AnswerB
103. Which CSS property is used to set the font family of an element?
A) font-style
B) font-family
C) font-weight
D) text-font
View AnswerB
104. In CSS, how do you make text bold?
A) font-weight: bold;
B) text-style: bold;
C) font-bold: true;
D) font-size: bold;
View AnswerA