HTML & CSS Interview Questions

1. What is the CSS box model and how do content, padding, border, and margin interact?

2. What is the difference between the CSS box-sizing values content-box and border-box?

3. How does CSS specificity work and how are conflicting rules resolved?

4. What is the difference between Flexbox and CSS Grid, and when should you use each?

5. What are semantic HTML elements and why do they matter for accessibility and SEO?

6. What is the difference between position relative, absolute, fixed, and sticky in CSS?

7. How does the CSS cascade and inheritance determine which styles apply?

8. What is the difference between display block, inline, and inline-block?

9. What are CSS media queries and how do they enable responsive design?

10. What is the difference between em, rem, px, and percentage units in CSS?

11. How do CSS pseudo-classes and pseudo-elements differ?

12. What is a stacking context and how does z-index actually work?

13. What is the difference between visibility hidden, display none, and opacity zero?

14. How do CSS transitions and animations differ, and when do you use each?

15. What are CSS custom properties (variables) and how do they differ from preprocessor variables?

16. What is the difference between the HTML id and class attributes?

17. How does the browser critical rendering path turn HTML and CSS into pixels?

18. What are ARIA roles and attributes and when should you use them?

19. What is the difference between HTML data attributes and other ways to store metadata?

20. How do you center an element horizontally and vertically in CSS?

21. What is the difference between min-width, max-width, and width in responsive layouts?

22. What are CSS Grid template areas and how do they simplify layout?

23. What is the difference between absolute and relative URLs in HTML links and assets?

24. How does the picture element and srcset enable responsive images?

25. What is the difference between the meta viewport tag settings for mobile rendering?

26. How do CSS containment and content-visibility improve rendering performance?

27. What is the difference between rem-based and clamp-based fluid typography?

28. What are the differences between HTML form input types and their validation attributes?

29. How does the CSS overflow property control scrolling and clipping?

30. What is the difference between logical properties (inline/block) and physical properties in CSS?

31. Block vs Inline Elements: What's the Difference?

32. What is Flexbox in CSS?

33. ID vs Class Selectors in CSS: What's the Difference?

34. What is Specificity in CSS?

35. What is the Position Property in CSS?

36. Relative vs Absolute Positioning in CSS

37. What is the Difference Between Padding and Margin?

38. What is a CSS Variable (Custom Property)?

39. What is the Display Property in CSS?

40. What Is box-sizing in CSS and How Does It Affect Layout?

41. What Is a Viewport in Responsive Web Design?

42. What Is the Difference Between em and rem in CSS?

43. What Is a CSS Reset and Why Do Projects Use One?

44. What Is the Difference Between visibility and display in CSS?

45. What Is a CSS Sprite and Why Was It Used?

46. What Is BEM Naming Convention in CSS?

47. What Is a Web Font and How Does @font-face Work?

48. What Is Accessibility in HTML and Why Does It Matter?

49. Why Does position: fixed Stop Working Inside a Transformed Ancestor?

50. A Dropdown Renders Behind a Sibling Despite a Huge z-index. How Do You Debug It?

51. How Do CSS Cascade Layers Change Specificity, and How Do You Debug a Rule That Loses?

52. When Would You Reach for Container Queries Instead of Media Queries?

53. What Problem Does CSS Subgrid Solve That a Nested Grid Cannot?

54. Explain min-content, max-content, fit-content and fr — When Does Each Win?

55. How Do CSS Custom Properties Inherit, and What Does @property Change?

56. What Triggers Reflow Versus Repaint, and What Is Layout Thrashing?

57. Why Does a Child's Margin Push Its Parent Down, and How Do You Stop It?

58. How Do You Manage Focus and Accessible Names in a Custom Dialog?

59. How Does Native HTML Constraint Validation Work, and When Would You Override It?

60. Which Image Attributes Actually Affect LCP and Layout Shift?

61. How Do You Support prefers-reduced-motion, forced-colors and Print Styles?