CSS Basic Sheet

Basic CSS Questions:

1. What is CSS and why is it used?
2. How do you link a CSS file to an HTML file?
3. What is the difference between inline, internal, and external CSS?
4. How can you apply multiple classes to an HTML element?
5. What is the CSS box model? Explain its components.
6. How do you center a block element horizontally?
7. What is the difference between margin and padding?
8. How do you create a CSS rule that applies to all <p> elements?
9. What are CSS selectors? List some common selectors.
10. How can you apply styles to a class and an ID in CSS?
11. Explain the concept of specificity in CSS.
12. What are pseudo-classes and pseudo-elements in CSS? Give examples.
13. How can you make a list horizontal using CSS?
14. What is the z-index property and how is it used?
15. How can you make a website responsive using CSS?
16. What is a CSS reset? Why is it used?
17. Explain the difference between absolute, relative, fixed, and sticky positioning.
18. How do you use float and clear properties in CSS?
19. What is the display property in CSS and what are its possible values?
20. How do you hide an element in CSS?

Intermediate CSS Questions:

21. What is Flexbox and how do you use it?
22. Explain the CSS Grid layout and its advantages over Flexbox.
23. How do you create a grid layout with CSS Grid?
24. What is the ::before and ::after pseudo-elements? Provide examples.
25. How do you create a responsive navigation bar using CSS?
26. What are media queries and how do they work?
27. How do you use CSS transitions? Give an example.
28. Explain CSS animations and keyframes.
29. How can you create a gradient background in CSS?
30. What are CSS preprocessors? Explain the use of SASS or LESS.
31. What is the difference between em and rem units in CSS?
32. How do you create a CSS variable and use it?
33. Explain the concept of clipping in CSS.
34. How can you create a CSS shape like a circle or triangle?
35. What is the box-sizing property and how does it affect the box model?
36. How do you apply a shadow to an element using CSS?
37. What is the overflow property and how is it used?
38. How do you create a tooltip using CSS?
39. What are the different ways to apply custom fonts in CSS?
40. How can you create a responsive image gallery using CSS?

Advanced CSS Questions:

41. Explain the concept of CSS specificity and how to calculate it.
42. What is the @supports rule in CSS?
43. How can you create complex animations using CSS?
44. What is the calc() function in CSS and how is it used?
45. How do you handle browser compatibility issues in CSS?
46. Explain the use of will-change property in CSS.
47. What is the content-visibility property and how does it improve performance?
48. How can you use CSS to create a parallax scrolling effect?
49. What is the difference between visibility and opacity properties?
50. Explain the concept of CSS Houdini and its potential impact on web development.
51. How do you use the @font-face rule in CSS?
52. What is the backface-visibility property used for in CSS?
53. Explain the concept of min-width and max-width in responsive design.
54. How can you create a fixed header that stays at the top of the page using CSS?
55. What is the difference between nth-child and nth-of-type selectors?
56. How do you use the pointer-events property in CSS?
57. How can you create a CSS-only dropdown menu?
58. Explain the concept of the CSS cascade and how it affects the application of styles.
59. How do you use the filter property in CSS?
60. What are the differences between CSS transition and animation properties?
61. What is the clip-path property and how do you use it?
62. How can you create a CSS grid layout with fixed and flexible columns?
63. What is the object-fit property and how is it used with images and videos?
64. How do you create a custom scrollbar using CSS?
65. Explain the concept of CSS logical properties and values.
66. How do you create a multi-column layout using CSS?
67. What is the :focus-within pseudo-class and how is it used?
68. How do you use the scroll-snap properties in CSS?
69. What is the mix-blend-mode property and how do you use it?
70. How can you create a CSS-only modal popup?

Expert CSS Questions:

71. Explain the concept of CSS Grid areas and how to use them.
72. How can you create a responsive layout using CSS Grid and Flexbox together?
73. What is the contain property in CSS and how does it improve performance?
74. How do you use the :target pseudo-class to create in-page navigation?
75. What are CSS functions like var(), attr(), and env()? Provide examples.
76. How do you implement a dark mode switch using CSS custom properties?
77. What is the is() pseudo-class and how does it simplify writing CSS selectors?
78. How can you create a 3D effect using CSS transforms and perspectives?
79. What is the aspect-ratio property and how do you use it in responsive design?
80. How do you create a responsive typography scale using CSS?
81. How do you write maintainable and scalable CSS code?
82. What are some common CSS naming conventions, like BEM, and why are they used?
83. How do you optimize CSS for performance?
84. What are the best practices for organizing and structuring CSS files?
85. How do you handle large CSS projects and manage CSS dependencies?
86. What are CSS architecture methodologies like OOCSS, SMACSS, and ITCSS?
87. How do you debug CSS issues effectively?
88. What are some common CSS pitfalls and how do you avoid them?
89. How do you use CSS in a component-based framework like React or Vue?
90. How do you ensure accessibility (a11y) in your CSS design?

CSS Tools and Frameworks:

91. What are CSS frameworks like Bootstrap, and how do they simplify development?
92. How do you use CSS-in-JS libraries like styled-components or Emotion?
93. What is Tailwind CSS and how does it differ from traditional CSS frameworks?
94. How do you integrate CSS with modern build tools like Webpack or Parcel?
95. What is PostCSS and how does it extend CSS with plugins?
96. How do you use CSS Modules in a project?
97. What are the advantages of using a CSS preprocessor like Sass or LESS?
98. How do you implement CSS theming in a web application?
99. What is the purpose of CSS linting tools, and how do you use them?
100. How do you use CSS to create adaptive designs for different devices and screen sizes?

These additional questions should provide a thorough coverage of CSS concepts, techniques, and best practices.