CSS

Core Concepts

1) What is CSS?

Answer: CSS controls presentation: colors, spacing, layout, responsiveness.

Memory hook: CSS = Style layer.

2) What are the ways to apply CSS?

Answer: Inline (style=""), internal <style>, external .css. Best practice: external.

3) What is specificity?

Answer: It decides which rule wins when multiple rules match. Inline > ID > class/attr/pseudo-class > element.

Interview phrase: “More specific selector wins.”

4) What is the cascade?

Answer: CSS chooses rules based on importance, specificity, and order (later wins if same specificity).

5) What does !important do?

Answer: Forces a rule to win over normal rules. Use rarely—can make debugging hard.

6) Difference between margin and padding?

Answer: Margin = space outside element. Padding = space inside element (between border and content).

Memory: Margin moves the box; padding grows the box.

7) What is the box model?

Answer: Content + padding + border + margin.

Tip: box-sizing: border-box makes width include padding+border.

8) What is box-sizing: border-box and why used?

Answer: Makes layouts easier because declared width stays stable even if padding is added.

9) What is inheritance in CSS?

Answer: Some properties pass from parent to child (like color, font-family), but not all (like margin).

10) How do you center a div?

Answer: Common ways:

• margin: 0 auto; for fixed-width block

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

• Grid: place-items:center;

---

Selectors

11) Explain basic selectors.

Answer: Element (p), class (.btn), id (#header), group (h1, h2).

12) What is descendant vs child selector?

Answer: Descendant: .card p (any level). Child: .card > p (direct child only).

13) What is attribute selector?

Answer: Targets elements by attributes. Example: input[type="email"] {}.

14) What is pseudo-class?

Answer: Styles element state: :hover, :focus, :active, :first-child.

Interview-friendly: mention :focus-visible for accessibility.

15) What is pseudo-element?

Answer: Styles part of element: ::before, ::after, ::first-letter.

Example: .tag::before { content: "#"; }

16) What is the universal selector?

Answer: * targets everything. Useful for resets, but be careful with performance.

---

Layout: Display, Position, Flex, Grid

17) Difference between display: block, inline, inline-block?

Answer: Block = new line + full width. Inline = no width/height control. Inline-block = inline flow but supports width/height.

18) What is position: relative used for?

Answer: Moves element relative to its normal spot and becomes reference for absolutely positioned children.

19) What is position: absolute?

Answer: Removed from normal flow and positioned relative to nearest positioned ancestor (non-static), otherwise the page.

20) What is position: fixed vs sticky?

Answer: Fixed stays on screen always. Sticky behaves like relative until it reaches a scroll threshold, then sticks.

21) What is z-index?

Answer: Controls stacking order of positioned elements. Works only when element is positioned (not static) in most cases.

22) What is Flexbox best for?

Answer: One-dimensional layouts (row OR column). Great for navbars, centering, small components.

23) Key Flexbox properties?

Answer: Container: display:flex, justify-content, align-items, gap, flex-wrap.

Items: flex, flex-grow, flex-shrink, flex-basis, align-self.

24) What is CSS Grid best for?

Answer: Two-dimensional layouts (rows AND columns). Great for dashboards, page layouts.

25) Key Grid properties?

Answer: display:grid, grid-template-columns, grid-template-rows, gap, grid-column, grid-row.

26) Flex vs Grid—how to choose?

Answer: Use Flex for linear alignment and components; Grid for full page sections and complex 2D structure.

---

Responsive Design

27) What is responsive design?

Answer: Layout adapts to screen sizes using fluid units, flexible grids, and media queries.

28) What is a media query?

Answer: Applies CSS based on conditions like width.

Example: @media (max-width: 768px) { ... }

29) Difference between px, %, em, rem, vh, vw?

Answer:

• px: fixed

• %: relative to parent

• em: relative to element font-size

• rem: relative to root font-size

• vh/vw: viewport-based

30) What is mobile-first CSS?

Answer: Write default styles for mobile, then add min-width breakpoints for larger screens. It’s cleaner and often faster.

---

Typography & Colors

31) How do you change font in CSS?

Answer: Use font-family, font-size, font-weight, line-height.

Good practice: line-height: 1.5 for readability.

32) Difference between em and rem in font sizing?

Answer: em can compound based on parent; rem stays consistent based on root—more predictable.

33) What is the best way to define colors?

Answer: Use variables + modern formats when possible. Example: :root{ --brand:#C83732; }.

34) What are CSS variables and why use them?

Answer: Reusable values across CSS and easy theming.

Example: color: var(--brand);

---

Backgrounds, Borders, Shadows

35) How do backgrounds work?

Answer: background-color, background-image, background-size, background-position, background-repeat.

36) What is a gradient in CSS?

Answer: A generated background image.

Example: background: linear-gradient(90deg, #000, #333);

37) Border vs outline?

Answer: Border takes space and affects box model; outline doesn’t take space and is great for focus indication.

38) What is box-shadow used for?

Answer: Adds depth. Example: box-shadow: 0 4px 12px rgba(0,0,0,.15);

---

Transitions, Animations

39) What is a CSS transition?

Answer: Smoothly changes property from one value to another.

Example: transition: transform .2s ease;

40) What is CSS animation?

Answer: Uses @keyframes for multi-step motion. Best for repeated or complex effects.

41) Transition vs animation?

Answer: Transition needs a trigger (hover, class change). Animation can run automatically and loop.

---

Practical Interview Topics

42) What is overflow and when used?

Answer: Controls content that doesn’t fit: hidden, scroll, auto.

Example: overflow: auto; for scrollable area.

43) What is object-fit for images?

Answer: Controls how an image fits inside its box. cover fills and crops; contain shows full image.

Example: img { width:200px; height:200px; object-fit:cover; }

44) What is display: none vs visibility: hidden?

Answer: none removes from layout; hidden keeps space but hides element.

45) How do you create a simple CSS reset?

Answer: Remove default spacing and set box sizing.

Example: *{margin:0;padding:0;box-sizing:border-box;}

46) What are common accessibility CSS tips?

Answer: Keep good contrast, visible focus states, don’t remove outline blindly, use :focus-visible.

47) What is BEM naming?

Answer: A naming convention: block__element--modifier which keeps CSS scalable.

Example: card__title--large.

48) What causes layout shifting and how to reduce it?

Answer: Missing image dimensions, late-loading fonts, dynamic content. Fix with reserved space (width/height), font loading strategies.

49) What is gap and why better than margins sometimes?

Answer: gap adds spacing between flex/grid children cleanly without margin hacks. Works great for consistent spacing.

50) What’s the most common CSS mistake in interviews?

Answer: Overusing !important, not understanding specificity, and trying to “force” layout without Flex/Grid fundamentals.