1–20: CSS Basics
1. What is CSS?
CSS is a stylesheet language used to style HTML elements.
2. What does CSS stand for?
Cascading Style Sheets.
3. What is external CSS?
A separate .css file linked using <link>.
4. What is internal CSS?
CSS written inside <style> tag in HTML.
5. What is inline CSS?
CSS written directly in an HTML tag using style=””.
6. What is the CSS Box Model?
Content → Padding → Border → Margin.
7. What is specificity?
Rules that determine which CSS rule wins.
8. What is a selector?
Pattern used to select HTML elements.
9. What are pseudo-classes?
Selectors for element states (:hover, :active).
10. What are pseudo-elements?
Select part of element (::before, ::after).
11. What is inheritance in CSS?
Some properties pass from parent to child.
12. What is the “cascading” in CSS?
Order of applying styles: browser → user → author.
13. What is !important rule?
Overrides all other CSS declarations.
14. What is the difference between class and id?
Class = reusable, ID = unique.
15. What is display property?
Defines layout behavior (block, inline, flex, grid).
16. What is a combinator?
Defines relationships between selectors (>, +, ~).
17. What is a CSS Reset?
Resets browser default styles.
18. What is a CSS Preprocessor?
Tools like SASS/LESS that add features.
19. What is the difference between CSS and SCSS?
SCSS supports variables, nesting, mixins, etc.
20. What is calc() in CSS?
Used to perform calculations dynamically.
21–40: CSS Layout
21. What is Flexbox?
1D layout model for row or column alignment.
22. What is Grid?
2D layout model with rows & columns.
23. Flexbox vs Grid?
Flexbox: one dimension
Grid: two dimensions
24. How to center a div horizontally?
margin: 0 auto;
25. How to center text vertically using flex?
display: flex;
align-items: center;
26. What is position: relative?
Positioned relative to itself.
27. What is position: absolute?
Positioned relative to nearest positioned parent.
28. What is position: fixed?
Fixed to viewport.
29. What is position: sticky?
Sticks when scrolling.
30. What is z-index?
Controls stacking of positioned elements.
31. What is float?
Moves elements left/right.
32. What is clear?
Prevents elements from floating around.
33. What does overflow do?
Controls scrolling & hidden content.
34. What is object-fit?
Controls image resizing inside containers.
35. What is white-space?
Controls text wrapping.
36. What is word-wrap?
Breaks long words.
37. What is the difference between inline and block?
Inline: no line break
Block: takes full width
38. What is inline-block?
Inline element that allows width/height.
39. How do you hide an element?
display: none; or visibility: hidden;
40. Difference between those two?
display:none removes element;
visibility:hidden keeps space.
41–60: Units & Colors
41. What is px?
Fixed pixel unit.
42. What is em?
Relative to parent font size.
43. What is rem?
Relative to root font size.
44. What is % in CSS?
Relative to parent.
45. What are viewports (vw/vh)?
Relative to browser screen size.
46. What is RGB color?
Red, green, blue format.
47. What is RGBA?
RGB with alpha (transparency).
48. What is HSL?
Hue, saturation, lightness.
49. How to make gradient background?
background: linear-gradient(red, blue);
50. What is currentColor?
Uses current text color.
51. What is inherit value?
Takes parent value.
52. What is initial value?
Resets to default.
53. What is unset?
Acts like inherit or initial depending on property.
54. What is contrast in CSS?
Used in filters to change brightness.
55. What is filter property?
Applies effects like blur, brightness.
56. What is CSS variable?
Custom property:
:root { –main: blue; }
57. How to use CSS variable?
color: var(–main);
58. Can CSS variables be updated?
Yes, using JavaScript.
59. What are browser prefixes?
-webkit-, -moz-, -ms-
60. Why are prefixes used?
For experimental features.
61–80: Advanced CSS
61. What is a media query?
Makes websites responsive.
62. Example of media query?
@media(max-width:600px){}
63. What is mobile-first design?
Designing for small screens first.
64. What is @import?
Imports CSS from another file.
65. Why is @import slow?
Blocks page rendering.
66. What is a sprite in CSS?
One image containing multiple icons.
67. What is clip-path?
Clips element into shapes.
68. What is transform?
Rotates, scales, translates elements.
69. What is transition?
Smooth change of properties.
70. What is animation?
Multi-step change via @keyframes.
71. Example of animation
@keyframes move{from{left:0;}to{left:100px;}}
72. What is backface-visibility?
Hides backside of rotated elements.
73. What is perspective?
Applies 3D depth.
74. What is stacking context?
Defines z-index grouping.
75. What is shadow DOM?
Scoped DOM for components.
76. What is CSS containment?
Isolates rendering for performance.
77. What is cascade layer?
Organizes layers of CSS rules.
78. What is mix-blend-mode?
Blends element colors.
79. What is isolation?
Creates new stacking context.
80. What is place-items?
Shorthand for align-items & justify-items (Grid).
81–100: Practical Questions
81. How to create a triangle using CSS?
Using borders:
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
82. How to make text ellipsis (…)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
83. How to remove bullet points in list?
list-style: none;
84. How to change cursor on hover?
cursor: pointer;
85. How to make element unselectable?
user-select: none;
86. How to blur an image?
filter: blur(5px);
87. How to create a circle in CSS?
border-radius: 50%;
88. How to import Google Font?
@import url(‘https://fonts.googleapis.com/css2?family=Poppins’);
89. How to remove border from input?
border: none;
90. How to animate background color?
transition: background 1s;
91. How to freeze animation?
animation-play-state: paused;
92. How to hide scrollbar?
::-webkit-scrollbar { display: none; }
93. How to create shadow?
box-shadow: 0 4px 8px gray;
94. How to apply grayscale filter?
filter: grayscale(100%);
95. How to create responsive image?
img { width: 100%; height: auto; }
96. How to disable pointer events?
pointer-events: none;
97. How to set max content width?
max-width: 100%;
98. How to vertically align text?
line-height: height;
99. How to use custom font locally?
@font-face {
font-family: myFont;
src: url(“font.ttf”);
}
100. How to animate on scroll?
Using libraries like AOS or custom JS + CSS.
