Top 100 CSS Interview Questions with Answers

1. What is CSS?
   CSS (Cascading Style Sheets) is used to style and format HTML elements by controlling layout, colors, fonts, spacing, etc.
   
2. What are the types of CSS?
   
   • Inline CSS
     
   • Internal CSS (inside <style>)
     
   • External CSS (linked via .css file)
     
3. What is the difference between inline, internal, and external CSS?
   
   • Inline: Applies to a single element only.
     
   • Internal: Applies to one HTML file only.
     
   • External: Applies styles across multiple pages.
     
4. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?
   
   • Relative: Positioned relative to itself.
     
   • Absolute: Positioned relative to the nearest positioned ancestor.
     
   • Fixed: Stays in the same place even when scrolling.
     
   • Sticky: Behaves like relative until scrolling reaches a threshold.
     
5. What are pseudo-classes in CSS?
   Pseudo-classes define a special state of an element (e.g., :hover, :focus, :first-child).
   
6. What is the difference between absolute and relative units in CSS?
   
   • Absolute: Fixed (e.g., px, pt, cm).
     
   • Relative: Based on context (e.g., em, rem, %, vw, vh).
     
7. What is the difference between inline and block elements in CSS?
   
   • Inline: Doesn’t start on a new line, only occupies necessary width (<span>).
     
   • Block: Starts on a new line and occupies full width (<div>).
     

What are media queries in CSS?
Used for responsive design, applying styles based on device conditions (screen size, orientation).
Example:

@media (max-width: 600px) {

  body { background: lightblue; }

}

9. What is the difference between relative and static position in CSS?
   
   • Static: Default position.
     
   • Relative: Allows top, left, right, bottom adjustments.
     
10. What are CSS selectors?
    Patterns used to select HTML elements. Types:
    

• Universal (*)
  
• Class (.class)
  
• ID (#id)
  
• Attribute ([attr])
  
• Descendant (div p)
  

11. What is the difference between em and rem units?
    

• em: Relative to parent element’s font size.
  
• rem: Relative to root (html) font size.
  

12. What is the difference between relative length units %, vw, and vh?
    

• %: Relative to parent size.
  
• vw: 1% of viewport width.
  
• vh: 1% of viewport height.
  

13. What are CSS transitions?
    Allow smooth animation between property values.
    

div {

  transition: all 0.3s ease-in-out;

}

14. What are CSS animations?
    Used for more complex animations with @keyframes.
    

@keyframes slide {

  from { left: 0; }

  to { left: 100px; }

}

15. Difference between relative and absolute imports in CSS?
    

• Relative: url(../images/bg.png)
  
• Absolute: url(http://example.com/bg.png)
  

16. What is the difference between absolute and relative URL in CSS?
    

• Relative: Depends on file location.
  
• Absolute: Full path with protocol.
  

17. What is the difference between inline-block and block elements?
    

• Block: Takes full width.
  
• Inline-block: Behaves like inline but allows width/height.
  

18. What is the difference between Flexbox and Grid?
    

• Flexbox: One-dimensional (row/column).
  
• Grid: Two-dimensional (rows & columns).
  

19. What is the difference between absolute and relative path in CSS background images?
    Similar to URLs – absolute includes full path, relative depends on file location.
    
20. What are CSS variables (custom properties)?
    

:root {

  –main-color: blue;

}

h1 {

  color: var(–main-color);

}

21. Difference between relative, absolute, fixed, and sticky positioning? (explained above in Q4)
    
22. Explain the concept of z-index.
    Determines stack order of elements. Higher z-index = element appears above others.
    
23. What is the difference between relative stacking and global stacking in CSS?
    

• Relative stacking: Based on parent stacking context.
  
• Global stacking: Across entire document.
  

24. Difference between inline styles and CSS specificity rules?
    Inline styles > ID selectors > Class selectors > Element selectors.
    
25. What is the difference between visibility: hidden and display: none?
    

• Hidden: Element still occupies space.
  
• None: Element removed from layout.
  

26. What are pseudo-elements in CSS?
    Used to style specific parts of an element.
    Examples: ::before, ::after, ::first-line.
    
27. What is the difference between relative and absolute positioning with respect to containing block?
    

• Relative: Offset from its original position.
  
• Absolute: Offset from nearest positioned ancestor.
  

28. What is the difference between responsive and adaptive design?
    

• Responsive: Fluid, uses media queries.
  
• Adaptive: Fixed layouts for specific screen sizes.
  

29. What is the difference between relative and absolute gradients in CSS?
    Relative gradient (percentage-based) scales, absolute gradient (px) fixed.
    
30. What is the difference between relative and absolute font sizes?
    Absolute (px, pt) fixed, relative (em, rem, %) scalable.
31. What is the difference between relative and absolute URLs in @import?
    

• Relative: Depends on file path.
  
• Absolute: Full URL path, independent of file location.
  

32. What are CSS combinators?
    Define relationships between selectors:
    

• Descendant (div p)
  
• Child (div > p)
  
• Adjacent sibling (h1 + p)
  
• General sibling (h1 ~ p)
  

33. Difference between inline, embedded, and external stylesheets?
    

• Inline: Style within element (style attribute).
  
• Embedded: Inside <style> tag in HTML.
  
• External: Linked .css file.
  

34. What is the difference between relative and absolute pseudo-classes?
    

• Relative: :hover, :focus, :active.
  
• Absolute: :first-child, :nth-child().
  

35. What is the difference between CSS reset and normalize.css?
    

• Reset: Removes all default browser styles.
  
• Normalize: Makes styles consistent across browsers but preserves useful defaults.
  

36. What is the difference between inline-block and inline elements?
    

• Inline: Cannot set width/height.
  
• Inline-block: Can set width/height while remaining inline.
  

37. What is the difference between CSS Flexbox and Grid layout?
    

• Flexbox: One-dimensional (row OR column).
  
• Grid: Two-dimensional (rows AND columns).
  

38. What is the difference between relative, fixed, and sticky positioning?
    

• Relative: Based on its normal position.
  
• Fixed: Based on viewport.
  
• Sticky: Switches between relative and fixed depending on scroll.
  

39. What is the difference between rem and vh units?
    

• rem: Relative to root font size.
  
• vh: Relative to viewport height.
  

40. What is the difference between relative and absolute background positioning?
    Relative uses percentages of element size, absolute uses fixed pixels.
    

41. What is CSS specificity?
    A ranking system that decides which CSS rule applies when multiple rules affect the same element.
    
42. Explain the order of CSS specificity.
    Inline styles > ID selectors > Class/attribute/pseudo-class > Element/pseudo-element.
    
43. How can you override CSS specificity?
    

• Use !important (not recommended).
  
• Increase selector specificity.
  
• Inline styles.
  

44. What is the difference between nth-child() and nth-of-type()?
    

• nth-child(): Targets element based on its position among siblings.
  
• nth-of-type(): Targets element based on type and position.
  

45. What is the difference between :hover and :active pseudo-classes?
    

• :hover: When the mouse is over element.
  
• :active: When the element is being clicked.
  

46. Difference between pseudo-class and pseudo-element?
    

• Pseudo-class: Defines a state (:hover).
  
• Pseudo-element: Defines a part of element (::before).
  

47. What is the difference between inline and external pseudo-classes?
    Pseudo-classes only exist in CSS, not inline styles.
    
48. What are attribute selectors in CSS?
    Select elements based on attributes. Example:
    

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

49. What is the difference between > and + in CSS selectors?
    

• > selects direct child.
  
• + selects adjacent sibling.
  

50. What is the difference between universal selector (*) and type selector?
    

• *: Selects all elements.
  
• div: Selects only specific type.
  

51. What is the difference between absolute, relative, and fixed widths?
    

• Absolute: Fixed size in px.
  
• Relative: % or em, adjusts with parent.
  
• Fixed: px but independent of parent.
  

52. What is the difference between relative and absolute heights?
    

• Relative: % of parent height.
  
• Absolute: Fixed px.
  

53. What is the difference between min-width, max-width, and width?
    

• width: Fixed width.
  
• min-width: Minimum allowed width.
  
• max-width: Maximum allowed width.
  

54. What is the difference between responsive design and fluid design?
    

• Responsive: Uses breakpoints (media queries).
  
• Fluid: Uses percentage-based widths for all devices.
  

55. What are viewport units in CSS?
    

• vw = 1% of viewport width.
  
• vh = 1% of viewport height.
  
• vmin = smaller of vw/vh.
  
• vmax = larger of vw/vh.
  

56. What is the difference between static and relative positioning?
    

• Static: Default position.
  
• Relative: Can be offset.
  

57. What is the difference between relative and sticky positioning?
    

• Relative: Always offset from normal position.
  
• Sticky: Sticks after crossing threshold.
  

58. What are breakpoints in responsive design?
    Screen widths at which layout changes. Example:
    

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

59. What is the difference between flex-wrap and nowrap in Flexbox?
    

• nowrap: Items stay in one line.
  
• wrap: Items move to next line if needed.
  

60. What is the difference between align-items and justify-content in Flexbox?
    

• align-items: Aligns vertically (cross-axis).
  
• justify-content: Aligns horizontally (main-axis).

61. What is the difference between Flexbox and Grid?
    

• Flexbox: 1D layout (row OR column).
  
• Grid: 2D layout (rows AND columns).
  

62. What is the difference between align-content and align-items in Flexbox?
    

• align-content: Aligns multiple rows.
  
• align-items: Aligns items in one row.
  

63. What is the difference between justify-items and justify-content in CSS Grid?
    

• justify-items: Aligns content inside each grid cell.
  
• justify-content: Aligns the entire grid inside container.
  

64. What is the difference between fr unit and percentage in Grid?
    

• fr: Fraction of available space.
  
• %: Relative to parent container size.
  

65. What are named grid areas in CSS Grid?
    You can name areas and place elements accordingly. Example:
    

grid-template-areas: “header header” “sidebar content”;

66. What is the difference between implicit and explicit grid in CSS?
    

• Explicit: Defined using grid-template-rows/columns.
  
• Implicit: Created automatically when items exceed defined grid.
  

67. What is the difference between auto-fill and auto-fit in CSS Grid?
    

• auto-fill: Fills rows/columns with as many tracks as possible.
  
• auto-fit: Similar, but collapses empty tracks.
  

68. What is the difference between grid-template and grid-auto?
    

• grid-template: Explicit grid definition.
  
• grid-auto: Defines behavior for auto-generated rows/columns.
  

69. What is the difference between minmax() and fit-content() in CSS Grid?
    

• minmax(min, max): Defines range of track size.
  
• fit-content(size): Shrinks to fit content but not beyond size.
  

70. What is the difference between grid-gap, row-gap, and column-gap?
    

• grid-gap: Shorthand for row + column gap.
  
• row-gap: Vertical spacing.
  
• column-gap: Horizontal spacing.
  

71. What is the difference between transitions and animations in CSS?
    

• Transitions: Between two states (hover, click).
  
• Animations: More complex, defined with @keyframes.
  

72. What are keyframes in CSS?
    Define stages of animation. Example:
    

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

73. What is the difference between ease, linear, ease-in, ease-out timing functions?
    

• ease: Default, smooth start and end.
  
• linear: Constant speed.
  
• ease-in: Slow start, fast end.
  
• ease-out: Fast start, slow end.
  

74. What is the difference between animation-fill-mode: forwards and backwards?
    

• forwards: Keeps final state after animation ends.
  
• backwards: Applies initial state before animation starts.
  

75. What is the difference between infinite and alternate animations?
    

• infinite: Repeats forever.
  
• alternate: Reverses direction every cycle.
  

76. What is hardware acceleration in CSS animations?
    Using transform & opacity triggers GPU acceleration → smoother animations.
    
77. What is the difference between transition-property: all and specific properties?
    

• all: Animates every changeable property.
  
• Specific: Only animates selected ones → better performance.
  

78. What is the difference between will-change and transform in animations?
    

• will-change: Hints browser of upcoming changes.
  
• transform: Actually applies transformation.
  

79. What are CSS transforms?
    Functions like translate, rotate, scale, skew to manipulate elements.
    
80. What is the difference between 2D and 3D transforms?
    

• 2D: TranslateX/Y, RotateZ.
  
• 3D: TranslateZ, RotateX/Y, Perspective.
  

81. What slows down CSS performance?
    

• Overusing universal selectors *.
  
• Deep nested selectors.
  
• Excessive reflows & repaints.
  

82. What is critical CSS?
    CSS needed for above-the-fold content → loads first for faster rendering.
    
83. How to reduce CSS file size?
    

• Minification.
  
• Remove unused CSS (PurgeCSS).
  
• Use shorthand properties.
  

84. What is the difference between inline styles and external CSS in performance?
    

• Inline: Faster for single page but no caching.
  
• External: Cacheable, better for multiple pages.
  

85. What are CSS preprocessors?
    Tools like SASS/LESS for variables, mixins, nesting.
    
86. What is the difference between CSS and SCSS?
    

• CSS: Plain stylesheets.
  
• SCSS: Preprocessor with variables, loops, nesting.
  

87. What is the difference between inline styles and CSS-in-JS?
    

• Inline: Written in HTML style attribute.
  
• CSS-in-JS: Scoped styles in JavaScript (React, Vue).
  

88. What is the difference between render-blocking and non-render-blocking CSS?
    

• Render-blocking: Stops page rendering until CSS loads.
  
• Non-blocking: Loads asynchronously (media, defer).
  

89. What is the difference between CSS minification and compression?
    

• Minification: Removes spaces/comments.
  
• Compression: Server-level gzip/brotli compression.
  

90. What is lazy-loading CSS?
    Loading CSS only when needed, using media attributes or JS injection.
    

91. What are CSS sprites?
    Combining multiple images into one → reduces HTTP requests.
    
92. What is the difference between inline SVG and background-image SVG?
    

• Inline SVG: Accessible, styleable.
  
• Background-image: Decorative only.
  

93. What is the difference between relative and absolute clipping in CSS?
    clip-path can be relative (percentage-based) or absolute (px values).
    
94. What is the difference between clip-path and mask in CSS?
    

• clip-path: Cuts shape visibly.
  
• mask: Uses transparency for visibility.
  

95. What is the difference between CSS logical and physical properties?
    

• Physical: margin-left, margin-right.
  
• Logical: margin-inline-start, margin-inline-end (RTL support).
  

96. What is the difference between shadow DOM CSS and normal CSS?
    Shadow DOM CSS is scoped, does not leak outside component.
    
97. What is the difference between relative units in CSS (em, rem, %)?
    

• em: Parent font-size.
  
• rem: Root font-size.
  
• %: Parent element’s size.
  

98. What is the difference between print and screen media queries?
    

• screen: Styles for digital screens.
  
• print: Styles applied during printing.
  

99. What is the difference between progressive enhancement and graceful degradation in CSS?
    

• Progressive enhancement: Start simple, add advanced features.
  
• Graceful degradation: Start full-featured, adapt downwards.
  

100. What is the difference between CSS Houdini and traditional CSS?
     

• Traditional CSS: Limited by predefined properties.
  
• CSS Houdini: Exposes CSS engine → allows custom CSS properties, painting APIs.