imabhinav.
dev
On this page Overview
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.
Previous
JavaScript Complete Sheet
