CSS

1. What does CSS stand for?

A: Cascading Style Sheets.

2. What is CSS used for?

A: For styling HTML elements, controlling layout, colors, fonts, spacing, etc.

3. How do you add CSS to a webpage?

A: Three ways:

• Inline: style attribute.
• Internal: <style> in HTML.
• External: Linked .css file via <link>.

4. How to select all <p> elements in CSS?

p { color: blue; }

5. How do you select an element by ID?

#myId { color: red; }

6. How do you select elements by class?

.myClass { font-size: 20px; }

7. How do you group multiple selectors?

h1, h2, h3 { font-family: sans-serif; }

8. What does * selector do?

A: Selects all elements.

* { margin: 0; padding: 0; }

9. How to select direct children?

div > p { color: green; }

10. How to select all descendants?

div p { 
    color: blue; 
  }

11. What is a CSS declaration block?

A: { property: value; }

12. What is the cascade in CSS?

A: Rules that determine which style is applied when multiple styles target the same element. Depends on specificity, importance, and order.

13. What is specificity?

A: A system of calculating which CSS rule wins when multiple rules target the same element.

14. What is the order of specificity?

• nInline styles > ID selectors > class/attribute/pseudo-class selectors > type selectors > universal selector.

15. How do you make a comment in CSS?

/* This is a comment */

16. What is the !important rule?

p { color: red !important; }

17. How to center text?

text-align: center;

18. How to apply a background color?

background-color: lightblue;

19. What is line-height?

A: Controls spacing between lines.

20. How do you change the font?

font-family: Arial, sans-serif;

21. What is an attribute selector?

input[type="text"] { border: 1px solid; }

22. How to select elements with a specific attribute present?

a[target] { color: green; }

23. How to select elements whose attribute value starts with a string?

a[href^="https"] { color: blue; }

24. Ends with?

img[src$=".png"] { border: 1px solid; }

25. Contains?

a[href*="example"] { color: orange; }

26. What is a pseudo-class?

A: Selects elements based on their state (like :hover).

27. Example of :hover?

button:hover { background: yellow; }

28. What does :nth-child() do?

A: Selects elements based on their position.

li:nth-child(2) { color: red; }

29. Difference between :nth-child(odd) vs :nth-of-type(odd)?

• :nth-child: counts all child nodes.
• :nth-of-type: only counts matching element types.

30. How to select last child?

`p`:last-child { margin-bottom: 0; }

31. What does :not() do?

button:not(.primary) { color: gray; }

32. What is a pseudo-element?

A: Used to style specific parts of an element.

p::first-line { font-weight: bold; }

33. Difference between :before and ::before?

A: :before is legacy, ::before is the modern notation. Both work.

34. Example using ::after?

a::after { content: " 🔗"; }

35. How to combine selectors?

h1.myclass:hover { color: purple; }

36. What is the CSS box model?

A: Describes how padding, border, margin, and content are rendered.

37. How to make an element’s box model include padding & border in width?

box-sizing: border-box;

38. What is the default value of box-sizing?

A: content-box.

39. How to remove margin/padding globally?

* { margin: 0; padding: 0; }

40. What does display: block do?

A: Makes an element start on a new line and take full width.

41. What is inline?

A: Does not start on a new line, width determined by content.

42. What is inline-block?

A: Like inline, but allows width & height to be set.

43. What is none?

A: Removes element from flow.

44. How to float elements?

float: left;

45. What is clear?

A: Stops floating elements from flowing around it.

clear: both;

46. How to center a block horizontally?

margin: 0 auto;

(needs a set width).

47. How to make an element take all remaining width?

A: Often with flex-grow:1 in Flexbox or using width: 100% after clearing floats.

48. What does position: relative do?

A: Positions element relative to its normal position.

49. What does absolute do?

A: Positions relative to nearest positioned ancestor.

50. What does fixed do?

A: Stays fixed relative to viewport.

51. What is Flexbox?

A: A CSS layout model that makes it easy to align, justify, and distribute space among items.

52. How to make a container a flex container?

.container { display: flex; }

53. What does flex-direction do?

A: Defines the direction of the main axis: row, row-reverse, column, column-reverse.

54. How to reverse order in a row?

flex-direction: row-reverse;

55. What is justify-content?

A: Aligns items along the main axis.

justify-content: center;

56. What is align-items?

A: Aligns items on the cross axis.

align-items: stretch;

57. What is align-self?

A: Aligns a single flex item on the cross axis.

58. How to make items wrap?

flex-wrap: wrap;

59. What is align-content?

A: Aligns multiple lines of flex items.

60. What is flex-grow?

A: Defines how much a flex item will grow relative to others.

61. What does flex-shrink do?

A: Controls how much item shrinks.

62. What is flex-basis?

A: Initial size before remaining space distributed.

63. Shorthand for flex-grow, flex-shrink, flex-basis?

flex: 1 0 auto;

64. How to make all items same width?

flex: 1;

65. How to center both horizontally and vertically?

display: flex;
justify-content: center;
align-items: center;

66. What is CSS Grid?

A: A two-dimensional layout system.

67. How to create a grid container?

.container { display: grid; }

68. How to define columns?

grid-template-columns: 100px 1fr 2fr;

69. How to define rows?

grid-template-rows: 50px auto;

70. What is gap in grid?

A: Sets spacing between grid items.

71. How to make uniform 3-column grid?

grid-template-columns: repeat(3, 1fr);

72. How to position an item on specific row/column?

grid-column: 2 / 4;
grid-row: 1 / 3;

73. What is grid-area?

A: Shorthand for specifying row/column start/end.

74. What is place-items?

A: Shortcut for align-items and justify-items.

75. How to name grid lines?

grid-template-columns: [start] 1fr [middle] 1fr [end];

76. What is a media query?

A: Used to apply styles based on conditions like screen size.

77. Example of mobile-first media query?

@media (min-width: 600px) {
  body { font-size: 18px; }
}

78. What does viewport meta tag do?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Controls scaling on mobile.

79. How to hide an element on small screens?

@media (max-width: 600px) {
  .hide { display: none; }
}

80. What is rem?

A: Relative to root (html) font-size.

81. What is em?

A: Relative to parent font-size.

82. Difference between vh and vw?

A:

• vh: viewport height (1vh = 1% height).
• vw: viewport width (1vw = 1% width).

83. What is clamp()?

A: Sets a value between a min and max.

font-size: clamp(1rem, 2.5vw, 3rem);

84. What is transition?

A: Smoothly changes properties over time.

85. Example transition on hover?

button {
  transition: background 0.3s;
}
button:hover {
  background: red;
}

86. What does ease mean?

A: Default transition timing function.

87. What is linear?

A: Transition at constant speed.

88. How to define keyframes animation?

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

89. How to apply animation?

.box {
  animation: slide 2s infinite;
}

90. What does animation-delay do?

A: Delays start of animation.

91. What is animation-direction: alternate?

A: Animates back and forth.

92. What is animation-fill-mode?

A: Controls styles after animation ends.

93. How to stop animation from repeating?

animation-iteration-count: 1;

94. What does transform: translate() do?

A: Moves element along X and/or Y axes.

95. What does rotate do?

transform: rotate(45deg);

96. How to scale element?

transform: scale(1.5);

97. What does transform-origin do?

A: Changes the point of origin for transforms.

98. Can you combine transforms?

transform: rotate(30deg) scale(1.2);

99. What is :first-of-type?

A: Selects first element of its type within parent.

100. What does :last-of-type do?

A: Selects last element of its type.

101. What does :only-child mean?

A: Selects element if it’s the only child.

102. How to match multiple attribute values?

a[href$=".pdf"][target="_blank"] { color: red; }

103. What is calc()?

width: calc(100% - 20px);

104. What is var() in CSS?

A: Retrieves custom property (variable).

:root { --main-color: blue; }
p { color: var(--main-color); }

105. What is currentColor?

A: Uses the current element’s color property.

border: 1px solid currentColor;

106. How to inherit parent property?

color: inherit;

107. How to reset to default?

color: initial;

/* ### 108. What is unset? A: Removes property, reverts to inherited or initial.

109. What is revert?

A: Rolls back to UA (browser) stylesheet.

110. How to blur an element?

filter: blur(5px);

111. How to make grayscale image?

filter: grayscale(100%);

112. What is backdrop-filter

A: Applies filter to area behind element.

113. How to make transparent overlay?

background: rgba(0,0,0,0.5);

114. What is mix-blend-mode?

A: Changes how element content blends with background.

115. Why avoid * { } resets excessively?

A: Can be expensive on large DOM trees.

116. Why prefer translate over top for animations?

A: Uses GPU, smoother.

117. What is “paint” in rendering?

A: Browser draws pixels for content.

118. How to reduce repaints?

A: Minimize layout changes, batch DOM updates.

119. Why limit deep selectors like div div div?

A: Slow to evaluate.

120. Why combine and minimize CSS files?

A: Reduces HTTP requests, speeds up loading.

121. What does overflow do?

A: Controls content that overflows an element’s box.

overflow: auto | hidden | scroll | visible;

122. How to control X and Y overflow separately?

overflow-x: scroll;
overflow-y: hidden;

123. What does white-space do?

white-space: nowrap;

Prevents text from wrapping.

124. How to truncate text with ellipsis?

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

125. What is word-break?

A: Determines how words break at line end.

word-break: break-all;

126. How to allow line breaks only at normal word boundaries?

word-wrap: normal;

127. What does list-style control?

A: Type, position, image for list markers.

128. How to remove bullets from a list?

list-style: none;

129. What is cursor property?

cursor: pointer;

Changes mouse cursor style.

130. How to disable text selection?

user-select: none;

131. What is difference between border and outline?

• border: takes space, affects layout.
• outline: does NOT take space.

132. How to create rounded corners?

border-radius: 8px;

133. How to make circle?

border-radius: 50%;

(on square element).

134. What does outline-offset do?

A: Sets space between outline and element edge.

135. How to set background image?

background-image: url('img.jpg');

136. How to repeat background?

background-repeat: no-repeat;

137. How to scale background?

background-size: cover;

138. What does background-position do?

A: Positions the image within the container.

139. How to create a linear gradient?

background: linear-gradient(to right, red, blue);

140. How to create radial gradient?

background: radial-gradient(circle, red, blue);

141. What is background-attachment: fixed;?

A: Makes background fixed while content scrolls (parallax effect).

142. What is justify-items in Grid?

A: Aligns grid items on the inline axis.

143. What is justify-self?

A: Aligns individual grid item.

144. Difference between gap and grid-gap?

A: Same effect, grid-gap is old name.

145. What is place-self?

A: Shortcut for align-self and justify-self.

146. Can you nest flex containers?

A: Yes, flex items can themselves be flex containers.

147. What does clip-path do?

clip-path: circle(50%);

Clips element into a shape.

148. How to create polygon clipping?

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

149. What does mask-image do?

A: Applies an image as mask.

150. How to style for print?

@media print {
  body { color: black; }
}

151. How to avoid page breaks inside an element?

page-break-inside: avoid;

152. What does position: sticky do?

A: Element toggles between relative and fixed based on scroll.

153. What is scroll-behavior: smooth;?

A: Enables smooth scrolling to anchor links.

154. How to create horizontal scrolling?

overflow-x: auto;
white-space: nowrap;

155. What is scroll-snap?

A: Snaps to elements on scroll.

156. What is drop-shadow?

filter: drop-shadow(4px 4px 10px gray);

157. How to invert colors?

filter: invert(100%);

158. How to declare CSS variable?

:root { --main-color: teal; }

159. How to use it?

color: var(--main-color);

160. What is fallback in var()?

color: var(--missing, black);

161. Can you nest CSS variables?

A: Not directly; but you can refer to one inside another value.

162. What is env()?

A: Uses environment variables (like iOS safe areas).

163. What is prefers-color-scheme?

@media (prefers-color-scheme: dark) { body { background: black; } }

Detects dark mode.

164. What is prefers-reduced-motion?

A: Detects user prefers reduced animation.

165. What is aspect-ratio in CSS?

aspect-ratio: 16/9;

Maintains ratio.

166. What is container queries?

A: Next-gen feature (like @container) to style based on container size.

167. What is outline useful for debugging?

outline: 1px solid red;

Doesn’t affect layout.

168. How to debug stacking?

A: Check z-index and position.

169. What is “CSS specificity wars”?

A: When styles override unpredictably due to complex selectors.

170. How to debug computed styles?

A: Use browser DevTools “Computed” tab.

171. Why use BEM naming?

A: Improves readability and reduces conflicts.

172. Why avoid !important?

A: Hard to maintain, breaks cascade.

173. Why use shorthand properties?

A: More concise, groups related styles.

174. Why external CSS better than inline?

A: Easier to maintain, cacheable.

175. What is @page rule?

A: Styles printed pages (like margins).

176. What is forced-colors media feature?

A: For high-contrast accessibility modes.

177. How to visually hide but keep accessible?

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
}

178. How to apply text shadow?

text-shadow: 2px 2px gray;

179. How to apply multiple box shadows?

box-shadow: 2px 2px red, -2px -2px blue;

180. Difference box-shadow vs filter: drop-shadow?

• box-shadow: based on box.
• drop-shadow: based on shape (transparent edges).

180. Difference box-shadow vs filter: drop-shadow?

• box-shadow: based on box.
• drop-shadow: based on shape (transparent edges).

181. What is the descendant combinator?

div p { color: red; }

Targets <p> inside <div> anywhere.

182. What is the child combinator?

div > p { color: blue; }

Targets immediate children only.

183. What is adjacent sibling combinator?

h2 + p { margin-top: 0; }

Targets <p> immediately following <h2>.

184. What is general sibling combinator?

h2 ~ p { color: gray; }

Targets all <p> siblings after <h2>.

185. What is the universal selector * good for?

A: Applying a style to all elements.

186. Can you combine class and attribute selectors?

button.primary[type="submit"] { }

187. What is :empty selector?

A: Selects elements with no children (including text).

188. What does :disabled target?

A: Disabled form elements.

189. What is :checked?

A: Matches checked checkboxes or radio buttons.

190. What is :valid / :invalid?

A: Styles form fields based on validation.

191. What is text-transform?

text-transform: uppercase;

Changes letter case.

192. What does letter-spacing do?

A: Controls space between characters.

193. What is word-spacing?

A: Controls space between words.

194. What is text-decoration?

text-decoration: underline;

Applies underlines, overlines, or lines through text.

195. How to style first letter?

p::first-letter { font-size: 200%; }

196. What is text-align-last?

A: Aligns last line of text.

197. What does direction: rtl do?

A: Sets text direction to right-to-left.

198. What is unicode-bidi?

A: Used with direction for complex text layouts.

199. What is writing-mode?

writing-mode: vertical-rl;

Rotates text flow.

200. What is text-orientation?

A: Controls orientation of text in vertical writing.

201. What are logical properties?

A: Instead of margin-left, use margin-inline-start.

202. Example of logical padding?

padding-block: 1em;

203. Why are logical props useful?

A: For layouts that adapt to writing directions (LTR vs RTL).

204. What is subgrid?

A: In CSS Grid Level 2 to inherit parent’s grid lines.

205. What is @layer?

A: To control order of style sources.

206. What is has() selector?

article:has(h2) { border: 1px solid; }

Parent selector—now landing in browsers.

207. What is accent-color?

A: Styles checkboxes/radios’ color.

208. What is scroll-timeline?

A: For scroll-driven animations.

209. What is CSS Houdini?

A: APIs to extend CSS by writing your own properties & paint.

210. What is container queries?

@container (min-width: 400px) { .box { font-size: 2rem; } }

Style elements based on container size, not viewport.

211. What is @media speech?

A: For styling how content is read by screen readers.

212. How to prevent a heading being split across pages in print?

page-break-after: avoid;

213. What is minmax()?

grid-template-columns: minmax(200px, 1fr);

Sets size range.

214. What is auto-fit vs auto-fill?

• auto-fill fills as many tracks as possible.
• auto-fit collapses empty tracks.

215. What is fr?

A: Fractional unit of remaining space in grid.

216. What is grid-auto-flow?

A: Controls auto-placement direction (row or column).

217. What is flex-wrap: wrap-reverse?

A: Wraps items in reverse order.

218. What is order in flex?

A: Controls visual order, not DOM order.

219. What is flex-shrink: 0?

A: Prevents shrinking.

220. What is min() and max()?

width: min(50%, 400px);

Chooses smallest (or largest) of values.

221. What is env() used for?

padding: env(safe-area-inset-top);

For device safe areas (notches).

222. Can calc() nest inside `var()?

A: Yes.

223. What is rgba()?

background: rgba(255,0,0,0.5);

224. What is hsl()?

color: hsl(120, 100%, 50%);

225. What is currentColor useful for?

A: Inherits element’s color.

226. What is color-scheme?

A: Indicates dark/light color theme support.

227. What is shorthand for margin?

margin: 10px 20px 30px 40px;

(top right bottom left).

228. What happens if only two values given?

margin: 10px 20px;

(top/bottom left/right).

229. What is font shorthand?

font: italic bold 16px/1.5 Arial;

230. Why avoid mixing shorthand with longhand sometimes?

A: Shorthand resets other properties.

231. What does z-index do?

A: Controls stacking order.

232. When does z-index work?

A: Only on positioned elements (relative, absolute, fixed, sticky).

233. What is a stacking context?

A: Groups elements together with common z-index context.

234. What is animation-play-state?

A: Pause/resume animation.

235. How to chain animations?

A: Use animation-delay or JS event listeners.

236. Can transitions animate display?

A: No, display is instant.

237. Can you transition height: auto?

A: Not directly. Use max-height.

238. What is star hack?

* html .box { height: 100px; }

Old IE hack.

239. What is @supports?

@supports (display: grid) { ... }

Feature queries.

240. What is :root selector?

A: Highest specificity selector, often used for variables.

241. How to style focus outline?

button:focus { outline: 2px solid blue; }

242. What is forced-colors media query?

A: Detects high-contrast modes.

243. What is outline-style: auto good for?

A: Lets browser decide accessible outline.

244. What is transition-property: all?

A: Transitions any property that changes.

245. What is transition-timing-function?

A: Controls speed curve.

246. Example of cubic bezier?

transition-timing-function: cubic-bezier(0.42,0,0.58,1);

247. Why avoid float for layouts today?

A: Better options: Flexbox, Grid.

248. Why use `will-change cautiously?

A: Can allocate extra resources.

249. How to fix text scaling in iOS?

-webkit-text-size-adjust: 100%;

250. Why use vendor prefixes?

A: For experimental features. Like:

-webkit-transform: rotate(45deg);

251. What does inline-table do?

A: Table layout but inline.

252. What is empty-cells?

A: Controls display of empty table cells.

253. What is table-layout: fixed?

A: Speeds rendering, fixes column widths.

254. What is direction: rtl on table?

A: Flips horizontal order.

255. What is caption-side?

A: Places table caption at top or bottom.

256. What is quotes in CSS?

A: Controls generated content for q.

257. What is resize?

resize: both;

Allows user to resize element.

258. What is pointer-events: none?

A: Makes element ignore mouse events.

259. What is scroll-margin?

A: Sets distance when using scrollIntoView.

260. What is scroll-padding?

A: Reserves space when using scroll snapping.

261. What is contain?

A: Optimizes rendering by isolating element subtree.

262. What is overscroll-behavior?

A: Prevents scroll chaining.

263. What is mix-blend-mode?

A: Controls how layer blends with below.

264. What is background-clip: text?

A: Clips background to text.

265. What is mask?

A: Uses another image to define visible parts.

266. What is shape-outside?

A: Floats text around a shape.

267. What is scrollbar-width?

scrollbar-width: thin;

268. What is all: unset?

A: Removes all inherited & browser styles.

269. What is hyphens?

A: Controls word hyphenation.

270. What is direction: rtl common for?

A: Arabic, Hebrew languages.

271. What is inverted-colors?

A: Detects if user agent is using color inversion.

272. What is light-level media feature?

A: Adapts to ambient light.

273. What is hover?

A: Detects if hover is available.

274. What is pointer?

A: Detects pointer precision (like coarse on touch).

275. Why load critical CSS first?

A: Prevents FOUC (Flash Of Unstyled Content).

276. Why use font-display: swap?

A: Shows fallback font until custom font loads.

277. What is isolation: isolate?

A: Creates new stacking context.

278. What is caret-color?

A: Changes text input cursor color.

279. What is touch-action?

A: Controls gestures like pinch-zoom.

280. Why avoid fixed for toolbars on mobile?

A: Can jump or be covered by OS UI.

281. What is perspective?

A: Gives 3D effect to children.

282. What is transform-style: preserve-3d?

A: Keeps children in 3D space.

283. What is backface-visibility?

A: Hides the back of a rotated element.

284. What is scroll-snap-type?

A: Enables snapping to elements.

285. What is scroll-snap-align?

A: Specifies alignment of snap point.

286. What is will-change hint for?

A: Optimizes upcoming changes.

287. What is paint-order for SVG text?

A: Controls order of fill, stroke, markers.

288. What is orphans & widows?

A: Controls minimum lines at page breaks.

289. What is column-count?

A: Splits content into columns.

290. What is column-gap?

A: Space between columns.

291. What is column-rule?

A: Adds line between columns.

292. What is break-inside?

A: Prevents column or page breaks inside.

293. What is box-decoration-break?

A: Controls wrapping boxes like with inline.

294. What is quotes: none?

A: Removes quotes from <q>.

295. What is writing-mode: sideways-rl?

A: Rotates lines sideways.

296. What is nav-index?

A: Old way to control tab order (deprecated).

297. What is image-rendering: pixelated?

A: Renders images with hard edges.

298. What is object-fit?

object-fit: cover;

Controls how replaced content like images are resized.

299. What is object-position?

A: Aligns inside box.

300. What is place-content?

A: Shorthand for align-content and justify-content. /*