• What is the CSS Box Model? Explain each component and how they affect the layout of an element on the page.
• How does CSS specificity work? If multiple CSS rules target the same element, how does the browser decide which one to apply? Give an example.
• What is Flexbox in CSS? Explain the difference between justify-content and align-items. Name at least 4 Flexbox properties and what they do.
• What is CSS Grid and how is it different from Flexbox? When would you choose Grid over Flexbox? Give an example of a CSS Grid layout.
• Explain the different CSS position values — static, relative, absolute, fixed, and sticky. How do they differ from each other? Give a real-world use case for absolute and fixed.
• What is responsive design? What is the difference between em, rem, px, %, and vw/vh units in CSS? Which ones would you prefer for responsive design and why?
• What is the difference between a pseudo-class and a pseudo-element in CSS? Give 3 examples of each and explain what they do.
• What is the difference between CSS transition and CSS animation? When would you use one over the other? Give an example of each.
• What is z-index in CSS? How does stacking context work? Why does z-index sometimes not work even when you set a high value?
• What is a CSS preprocessor? Have you used SASS/SCSS? What are the advantages it provides over plain CSS? Also what are CSS variables and how are they different from SASS variables?