🔹 CSS Basics (1–15)
1. What is CSS?
CSS (Cascading Style Sheets) is used to style and design HTML elements on web pages.
2. Types of CSS?
- Inline CSS
- Internal CSS
- External CSS
3. What is CSS selector?
Selector is used to select HTML elements for styling.
4. Types of selectors?
- Universal (
*) - Element (
p) - Class (
.box) - ID (
#header) - Attribute
- Pseudo-class
5. Difference between class and id?
- Class → reusable
- ID → unique
6. What is CSS specificity?
Rule that decides which style will apply.
7. Specificity order?
Inline > ID > Class > Element
8. What is !important?
Overrides all CSS rules (not recommended).
9. What is box model?
Content + Padding + Border + Margin.
10. Difference between margin and padding?
- Margin → outside space
- Padding → inside space
11. What is display property?
Controls element layout (block, inline, inline-block, none).
12. Difference between block and inline?
- Block → new line, full width
- Inline → same line, content width
13. What is inline-block?
Behaves like inline but supports width & height.
14. What is visibility property?
Controls element visibility without removing space.
15. Difference between display:none and visibility:hidden?
none→ removes elementhidden→ hides but keeps space
🔹 Layout & Positioning (16–30)
16. What is position property?
Defines element positioning.
17. Types of position?
- static
- relative
- absolute
- fixed
- sticky
18. Difference between relative & absolute?
- Relative → relative to itself
- Absolute → relative to nearest positioned parent
19. What is z-index?
Controls stacking order.
20. What is float?
Positions element left or right.
21. What is clear?
Clears float behavior.
22. What is overflow?
Controls content overflow (hidden, scroll, auto).
23. What is Flexbox?
One-dimensional layout system.
24. Main axis & cross axis?
- Row → main = horizontal
- Column → main = vertical
25. Important Flexbox properties?
display:flex, justify-content, align-items, flex-wrap
26. What is CSS Grid?
Two-dimensional layout system.
27. Difference between Flexbox & Grid?
Flex → 1D
Grid → 2D
28. What is responsive design?
Design that adapts to all screen sizes.
29. What is media query?
Applies CSS based on screen size.
30. Common breakpoints?
- Mobile: 480px
- Tablet: 768px
- Desktop: 1024px
🔹 Advanced CSS (31–50)
31. What is pseudo-class?
Styles based on state (:hover, :focus).
32. What is pseudo-element?
Styles part of element (::before, ::after).
33. Difference between pseudo-class & pseudo-element?
Class → state
Element → part of element
34. What is opacity?
Controls transparency.
35. What is transition?
Smooth change between styles.
36. What is animation?
Multiple steps animation using keyframes.
37. Difference between transition & animation?
Transition → start to end
Animation → multiple stages
38. What is transform?
Changes shape (scale, rotate, translate).
39. What is shadow?
box-shadow & text-shadow.
40. What is gradient?
Smooth color transition.
41. What is rem vs em?
- em → relative to parent
- rem → relative to root
42. What is viewport?
Visible area of browser.
43. What is object-fit?
Controls image resizing.
44. What is aspect-ratio?
Maintains width-height ratio.
45. What is calc()?
Performs CSS calculations.
46. What is CSS variable?
Reusable values using --var.
47. What is fallback?
Backup value if property fails.
48. What is vendor prefix?
Browser-specific styles (-webkit-).
49. What is BEM?
CSS naming methodology.
50. Why CSS is important?
Creates beautiful, responsive, user-friendly UI 🎨
