Top 50 CSS Interview Questions
Frequently asked in frontend, UI/UX, and full-stack interviews.
1. What is CSS? ⌄
CSS (Cascading Style Sheets) is used to style and layout web pages.
2. What are the types of CSS? ⌄
Inline CSS, Internal CSS, and External CSS.
3. What is CSS specificity? ⌄
A rule that determines which CSS style is applied when multiple rules target the same element.
4. What is !important? ⌄
Overrides all other CSS rules regardless of specificity.
5. What is the box model? ⌄
Consists of content, padding, border, and margin.
6. Difference between class and id? ⌄
Class can be reused; id must be unique.
7. What is display property? ⌄
Defines how an element is displayed (block, inline, inline-block, none).
8. Difference between display:none and visibility:hidden? ⌄
display:none removes element from layout; visibility:hidden hides it but keeps space.
9. What is position property? ⌄
Controls positioning: static, relative, absolute, fixed, sticky.
10. Difference between relative and absolute? ⌄
Relative positions from itself; absolute positions from nearest positioned ancestor.
11. What is z-index? ⌄
Controls vertical stacking order of elements.
12. What is overflow? ⌄
Controls content overflow (hidden, scroll, auto).
13. What is float? ⌄
Positions elements left or right inside a container.
14. What is clear? ⌄
Specifies which sides of floating elements are not allowed to float.
15. What is Flexbox? ⌄
A layout model for one-dimensional layouts (row or column).
16. What is CSS Grid? ⌄
A two-dimensional layout system for rows and columns.
17. Difference between Flexbox and Grid? ⌄
Flexbox is one-dimensional; Grid is two-dimensional.
18. What is responsive design? ⌄
Design that adapts to different screen sizes.
19. What are media queries? ⌄
Used to apply styles based on device width, height, or orientation.
20. What is mobile-first design? ⌄
Designing for mobile first, then scaling up for larger screens.
21. What is pseudo-class? ⌄
Defines a special state of an element (e.g., :hover).
22. What is pseudo-element? ⌄
Styles specific parts of elements (e.g., ::before, ::after).
23. What is opacity? ⌄
Controls transparency of an element.
24. What is transition? ⌄
Smoothly animates property changes.
25. What is animation? ⌄
Defines keyframe-based animations.
26. Difference between transition and animation? ⌄
Transitions need triggers; animations run automatically.
27. What is rem vs em? ⌄
rem is relative to root; em is relative to parent.
28. What is vh and vw? ⌄
Viewport height and viewport width units.
29. What is inherit? ⌄
Forces a property to inherit from parent.
30. What is initial? ⌄
Resets property to default value.
31. What is CSS preprocessor? ⌄
Extends CSS with variables and functions (Sass, Less).
32. What is Sass? ⌄
A popular CSS preprocessor.
33. What is CSS variable? ⌄
Reusable custom properties defined using --.
34. What is calc()? ⌄
Allows dynamic calculations in CSS.
35. What is object-fit? ⌄
Controls image resizing inside containers.
36. What is aspect-ratio? ⌄
Maintains width-height ratio.
37. What is pointer-events? ⌄
Controls mouse interactions.
38. What is cursor property? ⌄
Defines mouse cursor style.
39. What is white-space? ⌄
Controls text wrapping and spacing.
40. What is text-overflow? ⌄
Controls overflowed text appearance.
41. What is word-break? ⌄
Controls word wrapping behavior.
42. What is box-sizing? ⌄
Controls box model calculation.
43. What is filter? ⌄
Applies visual effects like blur and brightness.
44. What is backdrop-filter? ⌄
Applies effects to background behind elements.
45. What is shadow? ⌄
Adds shadow effects using box-shadow or text-shadow.
46. What is clamp()? ⌄
Sets responsive min, preferred, and max values.
47. What is container query? ⌄
Applies styles based on container size.
48. What is CSS optimization? ⌄
Reducing file size and improving performance.
49. What is critical CSS? ⌄
CSS required for initial page render.
50. CSS vs SCSS? ⌄
SCSS extends CSS with variables, nesting, and functions.