100 Interview Question of CSS

Basics of CSS

1. What is CSS?
2. What are the different types of CSS?
3. What is the difference between inline, internal, and external CSS?
4. What are the advantages of using CSS?
5. What is the syntax of a CSS rule?
6. What is the use of the class and id selectors in CSS?
7. What is the difference between class and id?
8. How do you include CSS in an HTML page?
9. What is a CSS selector?
10. What is specificity in CSS?

CSS Selectors

11. What is a universal selector in CSS?
12. What is the difference between > and in CSS selectors?
13. What does the + selector do in CSS?
14. How do you select elements with a specific attribute in CSS?
15. What is a pseudo-class in CSS?
16. What is a pseudo-element in CSS?
17. How do you style every third child element using CSS?
18. How does the nth-child() pseudo-class work?
19. What is the difference between :nth-child() and :nth-of-type()?
20. What does the :not() selector do?

CSS Box Model

21. What is the CSS box model?
22. What are the components of the box model?
23. How does margin differ from padding?
24. What is the difference between border-box and content-box?
25. How do you center an element using CSS?
26. How do you make a website responsive using CSS?
27. What is the use of z-index?
28. What is the difference between position: absolute, relative, fixed, and sticky?
29. What is the display property in CSS?
30. What does visibility: hidden do?
31. What’s the difference between visibility: hidden and display: none?
32. How do you apply styles to visited and unvisited links?
33. What are media queries?
34. What is the use of overflow in CSS?
35. What is collapsing margin?

CSS Flexbox and GRID

36. What is Flexbox in CSS?
37. How do you create a flex container?
38. What are the main axis and cross axis in Flexbox?
39. What does justify-content do?
40. What does align-items do?
41. What is the difference between align-items and align-content?
42. What is flex-grow, flex-shrink, and flex-basis?
43. What is shorthand for flex-grow, flex-shrink, and flex-basis?
44. How do you align one item at the end in a flex container?
45. What is the default value of flex-direction?
46. What is CSS Grid?
47. What’s the difference between Grid and Flexbox?
48. How do you create a grid layout?
49. What does grid-template-columns do?
50. What is grid-gap?
51. How do you place an item in a specific grid cell?
52. What is the fr unit in CSS Grid?
53. What is auto-fit and auto-fill in CSS Grid?
54. Can Grid and Flexbox be used together?
55. What does grid-area do?

CSS Units and Values

56. What are the different CSS units?
57. What is the difference between em and rem?
58. What is the difference between %, vw, and vh?
59. What are absolute and relative units in CSS?
60. When would you use calc() in CSS?
61. What is responsive web design?
62. What are media queries and how are they used?
63. What is a breakpoint in responsive design?
64. How do you hide elements on smaller screens?
65. What’s the difference between min-width and max-width in media queries?

CSS Positioning & Animations and Transitions

66. How does position: absolute behave?
67. What is the difference between relative and static positioning?
68. What is sticky positioning?
69. How does z-index affect layering?
70. Can a positioned element be placed relative to a non-positioned parent?
71. What is the difference between animation and transition?
72. What is the use of transition in CSS?
73. What properties can be animated with transition?
74. How do you create keyframe animations in CSS?
75. What does animation-fill-mode do?
76. What are variables in CSS?
77. How do you define and use a CSS variable?
78. What is the inherit, initial, and unset value?
79. What is the difference between important and specificity?
80. What are pseudo-elements? Give examples.
81. How do you make an element circular using CSS?
82. How do you remove bullet points from a list?
83. What is the difference between inline, block, and inline-block elements?
84. How do you make a div scrollable?
85. How can you create a sticky footer?

Browser Compatibility and Performance

86. What are vendor prefixes in CSS?
87. How do you handle cross-browser issues in CSS?
88. How can you optimize CSS for better performance?
89. What is the cascade in CSS?
90. What is the purpose of a CSS reset?

Debugging and Tools

91. How do you debug CSS in the browser?
92. What are some browser dev tools used for CSS debugging?
93. What is the use of outline in debugging?
94. What is the difference between outline and border?
95. How can you check if a CSS rule is being overridden?
96. What is Bootstrap in CSS?
97. What are the advantages of using CSS frameworks?
98. What is a CSS preprocessor? Name some.
99. What is the difference between SASS and SCSS?
100. Can you write nested rules in plain CSS?