🔹 Basic CSS Questions 1️⃣ What is the difference between relative, absolute, fixed, and sticky positioning? 2️⃣ What is the difference between em, rem, %, vw, and vh in CSS? 3️⃣ What is the difference between id and class in CSS? 4️⃣ How does the z-index property work? 5️⃣ What is the difference between inline, block, and inline-block elements? 6️⃣ What is the default position of an HTML element? 7️⃣ What are pseudo-classes and pseudo-elements? Give examples. 8️⃣ What is the difference between visibility: hidden; and display: none;? 9️⃣ What are media queries, and how do they help in responsive design? 10️⃣ How do you make an element responsive without using media queries?
🔹 Intermediate CSS Questions 11️⃣ What is Flexbox, and how does it differ from CSS Grid? 12️⃣ What is the difference between min-width, max-width, and width? 13️⃣ What is the difference between inherit, initial, and unset in CSS? 14️⃣ What are the different ways to apply CSS to a web page? 15️⃣ What is the difference between :nth-child() and :nth-of-type()? 16️⃣ What is the difference between opacity and rgba()? 17️⃣ How does clip-path work in CSS? 18️⃣ What is the difference between auto, scroll, and hidden in the overflow property? 19️⃣ What is a stacking context, and how does it affect z-index? 20️⃣ How do you center a div both vertically and horizontally?
🔹 Advanced CSS Questions 21️⃣ How do CSS animations and transitions work? 22️⃣ How do you create a pure CSS tooltip? 23️⃣ What are CSS variables (--custom-property), and how do they work? 24️⃣ What is the difference between will-change and transform? 25️⃣ What is the difference between contain, cover, and fill in background-size? 26️⃣ What are the performance considerations when using CSS animations? 27️⃣ What is a CSS preprocessor? How do SCSS and LESS differ from plain CSS? 28️⃣ What is the difference between CSS Grid fr unit and auto? 29️⃣ What is a critical rendering path, and how does CSS affect it? 30️⃣ What is the backface-visibility property used for?
🔹 Scenario-Based Questions 31️⃣ How would you create a responsive navbar without JavaScript? 32️⃣ How would you create a full-page background image that scales properly? 33️⃣ How can you implement a dark mode toggle using only CSS? 34️⃣ How can you make a CSS-only dropdown menu? 35️⃣ How would you create a CSS-only modal popup? 36️⃣ How can you prevent CLS (Cumulative Layout Shift) using CSS? 37️⃣ How do you handle CSS specificity issues? 38️⃣ How would you optimize CSS for faster page load times? 39️⃣ How can you create a gradient text effect in CSS? 40️⃣ How do you create a smooth scrolling effect using only CSS?