1. What are the advantages and disadvantages of using external CSS over inline and internal styles?
2. How does specificity work in CSS, and how can you calculate the specificity of a selector?
3. What is the !important declaration in CSS, and when should you use it?
4. How do CSS preprocessors like SASS or LESS enhance CSS capabilities?
5. What are CSS variables, and how do you declare and use them in a stylesheet?
6. How do you use media queries to create a responsive design?
7. What is the difference between max-width and min-width in media queries?
8. How do @media queries differ from @supports in CSS?
9. What is the purpose of the :root pseudo-class in CSS, and how is it commonly used with CSS variables?
10. How does the position: sticky property differ from position: fixed and position: relative?
11. What are CSS modules, and how do they improve the modularity and reusability of styles?
12. How do you implement cross-browser compatibility in CSS?
13. What is the difference between px, em, rem, vw, and vh units in CSS?
14. How do CSS units like vw and vh help create responsive designs?
15. What is the difference between display: none and visibility: hidden?
16. How does position: absolute behave in relation to its containing element?
17. What are viewport units, and how are they used in responsive design?
18. What is the CSS contain property, and how does it affect rendering?
19. What is the difference between block and inline elements in CSS?
20. How do you convert a block element to an inline element and vice versa?
21. What is display: flex, and how does it help in creating layouts?
22. What is the difference between justify-content and align-items in a flexbox?
23. How do you use flex-grow, flex-shrink, and flex-basis in a flexbox layout?
24. What is the purpose of the order property in a flexbox container?
25. How does CSS Grid differ from Flexbox in terms of layout design?
26. How do you create a grid layout using CSS Grid?
27. What is the grid-template-areas property, and how does it simplify grid layouts?
28. What is the purpose of the auto-fit and auto-fill keywords in CSS Grid?
29. How does the fr unit work in CSS Grid, and when should you use it?
30. What is the minmax() function in CSS Grid, and how does it enhance responsiveness?
31. How do you create overlapping grid items using the grid-column and grid-row properties?
32. What are subgrids, and how do they work in CSS Grid?
33. How do you handle overflow issues in CSS when content exceeds its container?
34. What is the overflow-x and overflow-y property, and how are they used in controlling scrollbars?
35. How do you create a sticky header using CSS?
36. What is the clip property in CSS, and how does it differ from clip-path?
37. What are CSS transitions, and how do they differ from animations?
38. How do you apply multiple transitions to an element in CSS?
39. What is the transition-timing-function, and how does it control the speed of transitions?
40. How do you create a delay between transitions in CSS?