Preparing for CSS interviews or improving your front-end development skills? This CSS MCQs collection covers commonly tested concepts, practical styling scenarios, responsive layouts, modern CSS features, and accessibility best practices. Use these multiple-choice questions to test your knowledge and identify topics to revise.
Note: Score 60% or higher to unlock an exclusive offer of up to 50% off on all self-paced CSS courses.
Let's begin!
1. What does CSS stand for?
2. Which HTML element is commonly used to link an external stylesheet?
3. Which HTML attribute points to the external CSS file?
4. Which element can contain CSS rules written directly in an HTML document?
5. Which character begins a CSS class selector?
6. Which character begins a CSS ID selector?
7. Which CSS property changes the text color?
8. Which property sets the background color of an element?
9. Which syntax correctly writes a CSS declaration?
10. Where is an external stylesheet usually saved?
11. Which CSS comment syntax is valid?
12. Which selector targets every element on the page?
Master Web Development Skills Through Instructor-Led Training and Courses.
13. Which selector targets all paragraph elements?
14. Which selector targets elements with class 'card'?
15. Which selector targets the element with id 'main'?
16. Which selector matches links inside a navigation element at any depth?
17. What does the child combinator (>) select?
18. Which selector matches an element when it is hovered?
19. Which pseudo-class selects the first child of its parent?
20. Which selector targets inputs whose type attribute is email?
21. Which selector has the highest specificity among these choices?
22. If two declarations have equal origin, importance, and specificity, which usually wins?
23. What does :not(.active) match?
24. Which selector groups h1 and h2 under the same declarations?
25. Which four areas are included in the CSS box model, from inside outward?
26. What does box-sizing: border-box do?
27. Which property controls the space inside an element's border?
28. Which property controls space outside an element's border?
29. What is the usual effect of display: none?
30. What is the key layout difference between visibility: hidden and display: none?
31. Which display value makes an element participate in inline flow while accepting width and height?
32. Which property sets the maximum width an element may reach?
33. Which property adds a visible line around an element's box?
34. What does overflow: auto generally do when content exceeds the box?
35. Which property controls whether an element uses a block or inline layout type?
36. What does margin: 0 auto commonly do to a fixed-width block?
Master Web Development Skills Through Instructor-Led Training and Courses.
37. Which position value places an element relative to its normal position?
38. An absolutely positioned element is generally positioned relative to what?
39. Which position value keeps an element fixed relative to the viewport during scrolling?
40. Which declaration creates a flex container?
41. In a row flex container, which property aligns items along the main axis?
42. In a row flex container, which property aligns items along the cross axis?
43. Which property allows flex items to move onto multiple lines?
44. What does flex: 1 commonly allow a flex item to do?
45. Which property changes the visual order of flex items without changing DOM order?
46. Which property defines the initial main size of a flex item?
47. How can a flex container center items on both axes in a typical row layout?
48. What does gap do in a flex container?
49. Which declaration creates a grid container?
50. Which property defines the columns in a CSS Grid container?
51. What does 1fr represent in CSS Grid?
52. Which function is commonly used to create responsive grid columns with a minimum size?
53. What does grid-template-areas define?
54. Which property lets an item span multiple grid columns?
55. What is the main difference between auto-fit and auto-fill in repeat() patterns?
56. Which property sets spacing between grid rows and columns?
57. Which property aligns grid items inside their individual grid areas along the inline axis?
58. What does grid-auto-flow: dense attempt to do?
59. What is CSS Grid particularly well suited for?
60. What does the subgrid value allow a nested grid to do?
61. Which at-rule is used to apply CSS based on viewport or device conditions?
62. Which media query targets viewports at 768 pixels wide or narrower?
63. Which unit is relative to the root element's font size?
64. Which unit represents 1% of the viewport width?
65. What is a mobile-first CSS strategy?
66. Which property helps an image scale within its container without exceeding its width?
67. What is the purpose of the viewport meta tag in responsive web pages?
68. Which media feature can detect a user's preference for reduced motion?
69. Which approach is usually better than many arbitrary device-specific breakpoints?
70. Which CSS function can clamp a value between a minimum and maximum while allowing a preferred fluid value?
71. Which unit is based on the height of the small viewport and can help account for mobile browser UI?
72. What does a container query evaluate when styling a component?
73. Which property changes the size of text?
74. Which property controls the thickness or boldness of text?
75. Which property controls the vertical distance between lines of text?
76. Which property aligns inline text within a block?
77. Which CSS color format supports red, green, blue, and alpha components?
78. What does the rem unit reference?
79. What does 1em generally reference for font-size calculations?
80. Which property adds space between characters?
81. Which property transforms text to uppercase visually?
82. Which function can mix a fluid value with viewport width for responsive typography?
83. Which property specifies a prioritized list of typefaces?
84. Which CSS feature lets authors load a custom font file?
Master Web Development Skills Through Instructor-Led Training and Courses.
85. Which pseudo-class matches a form control that currently has keyboard focus?
86. Which pseudo-element inserts generated content before an element's content?
87. Which pseudo-element styles the first line of a block's text?
88. Which pseudo-class matches a checked checkbox or radio button?
89. Which pseudo-class targets an input that fails its built-in constraint validation?
90. Which pseudo-class matches an element that is the only child of its parent?
91. What is the main difference between a pseudo-class and a pseudo-element?
92. Which selector matches every enabled form control?
93. Which pseudo-class is useful for styling an element when a user points to it with a mouse or similar pointer?
94. Which pseudo-class selects the third child among siblings regardless of element type?
95. What does :focus-visible help target?
96. Which pseudo-class can select a parent based on whether it contains a matching descendant?
97. How is a custom CSS property commonly declared?
98. Which function reads a CSS custom property?
99. Where are global custom properties commonly declared?
100. What is the purpose of calc() in CSS?
101. What does the !important annotation do?
102. What does the inherit keyword request?
103. What does the initial keyword do?
104. What is the purpose of @layer?
105. Which CSS function provides a fallback when a custom property is missing or invalid?
106. What does the all: unset declaration do?
107. What does @supports allow a stylesheet to do?
108. What is a benefit of using CSS custom properties for theme colors?
109. Which property specifies how long a CSS transition takes?
110. Which property defines the easing curve for a transition?
111. Which transform function moves an element horizontally and vertically?
112. Which transform function rotates an element?
113. Which at-rule defines named animation keyframes?
114. Which property attaches a named keyframe animation to an element?
115. What does animation-iteration-count: infinite do?
116. Which property defines the point around which a transform occurs?
117. What is the purpose of prefers-reduced-motion styles?
118. Which property can keep an element at the final keyframe styles after an animation ends?
119. Which property controls whether an animation is running or paused?
120. Which approach is generally preferable for smoother simple motion when appropriate?
Master Web Development Skills Through Instructor-Led Training and Courses.
121. What is the purpose of the :focus-visible pseudo-class in accessible styling?
122. Which CSS property can help prevent a user from selecting text?
123. Which property controls whether an element can receive pointer events?
124. What does object-fit: cover do to an image inside a sized box?
125. Which property helps define a consistent aspect ratio for a box?
126. What does content-visibility: auto help the browser do?
127. Which CSS feature can scope styles to a component's container size?
128. What is CSS nesting intended to improve?
129. Which layout feature allows grid tracks inside a nested grid to align with parent grid tracks?
130. What is a useful reason to avoid using color alone to communicate an error state?
131. Which property can provide a visible outline around a focused control without affecting layout dimensions?
132. Which practice helps keep CSS maintainable on a large project?
