100 CSS Interview Questions & Answers
CSS Basics
Q1. What is CSS?
CSS stands for Cascading Style Sheets used to style HTML.
Q2. Types of CSS?
Inline, Internal, External.
Q3. CSS syntax?
selector { property: value; }Q4. What is selector?
Selects HTML elements to style.
Q5. What is class selector?
.box { color:red; }Q6. What is ID selector?
#header { background:black; }Q7. Class vs ID?
Class is reusable, ID is unique.
Q8. What is CSS comment?
/* comment */
Q9. What is color property?
color: blue;
Q10. Background-color?
background-color: yellow;
Q11. Font-size?
font-size: 16px;
Q12. Font-family?
font-family: Arial, sans-serif;
Q13. Font-weight?
font-weight: bold;
Q14. Text-align?
text-align: center;
Q15. Border property?
border: 1px solid black;
Q16. Margin?
margin: 10px;
Q17. Padding?
padding: 15px;
Q18. Box model?
Content, Padding, Border, Margin.
Q19. Display property?
Controls element layout.
Q20. Inline vs block?
Inline fits content, block takes full width.
Q21. Display none?
display: none;
Q22. Visibility hidden?
visibility: hidden;
Q23. Difference display vs visibility?
display removes space, visibility keeps space.
Q24. Width property?
width: 200px;
Q25. Height property?
height: 100px;
Intermediate CSS
Q26. Position types?
Static, Relative, Absolute, Fixed, Sticky.
Q27. Position relative?
position: relative;
Q28. Position absolute?
position: absolute;
Q29. Position fixed?
position: fixed;
Q30. Position sticky?
position: sticky; top:0;
Q31. Z-index?
z-index: 10;
Q32. Float?
float: left;
Q33. Clear float?
clear: both;
Q34. Overflow?
overflow: hidden;
Q35. Cursor pointer?
cursor: pointer;
Q36. Opacity?
opacity: 0.5;
Q37. Box-shadow?
box-shadow: 0 2px 6px #000;
Q38. Text-shadow?
text-shadow: 1px 1px black;
Q39. Border-radius?
border-radius: 8px;
Q40. Background image?
background-image: url(img.jpg);
Q41. Background-size cover?
background-size: cover;
Q42. Pseudo-class?
a:hover { color:red; }Q43. Pseudo-element?
p::first-letter { font-size:30px; }Q44. Attribute selector?
input[type="text"]
Q45. rem vs em?
rem is root-based, em is parent-based.
Q46. px vs %?
px fixed, % relative.
Q47. Max-width?
max-width: 1200px;
Q48. Min-height?
min-height: 300px;
Q49. List-style none?
list-style: none;
Q50. Vertical align?
vertical-align: middle;
Q51. Transform?
transform: scale(1.1);
Q52. Transition?
transition: all 0.3s ease;
Q53. Filter blur?
filter: blur(4px);
Q54. Grayscale image?
filter: grayscale(100%);
Q55. Aspect-ratio?
aspect-ratio: 16/9;
Q56. User-select?
user-select: none;
Q57. Pointer-events?
pointer-events: none;
Q58. Text-transform?
text-transform: uppercase;
Q59. White-space?
white-space: nowrap;
Q60. Text overflow ellipsis?
text-overflow: ellipsis;
Advanced & Interview CSS
Q61. Flexbox?
display: flex;
Q62. Center using flex?
justify-content:center; align-items:center;
Q63. Flex-direction?
flex-direction: column;
Q64. Flex-wrap?
flex-wrap: wrap;
Q65. Order property?
order: 2;
Q66. CSS Grid?
display: grid;
Q67. Grid columns?
grid-template-columns: repeat(3,1fr);
Q68. Auto-fit vs auto-fill?
Auto-fit collapses empty tracks.
Q69. Media query?
@media(max-width:600px){}Q70. Mobile-first?
Design for mobile first.
Q71. CSS variables?
:root{--main:#2563eb;}Q72. Use CSS variable?
color: var(--main);
Q73. Calc()?
width: calc(100% - 40px);
Q74. Keyframes?
@keyframes fade{from{opacity:0}to{opacity:1}}Q75. Animation?
animation: fade 1s ease;
Q76. Inline-block use?
Align items without float.
Q77. CSS specificity?
ID > Class > Element.
Q78. !important?
Overrides all rules (avoid).
Q79. Reflow vs repaint?
Reflow affects layout, repaint visuals.
Q80. Critical CSS?
CSS needed for first render.
Q81. BEM?
Naming methodology.
Q82. OOCSS?
Object-oriented CSS.
Q83. CSS reset?
Removes browser defaults.
Q84. Normalize.css?
Makes styles consistent.
Q85. Inline SVG styling?
CSS can style SVG directly.
Q86. Clamp()?
font-size: clamp(14px,2vw,20px);
Q87. Logical properties?
margin-inline, padding-block.
Q88. prefers-color-scheme?
@media(prefers-color-scheme:dark){}Q89. CSS containment?
Improves performance.
Q90. will-change?
Hints browser for optimization.
Q91. Object-fit?
object-fit: cover;
Q92. CSS sprites?
Multiple images in one file.
Q93. Shorthand properties?
Combine multiple values.
Q94. Accessibility CSS?
Focus states, contrast.
Q95. Responsive units?
%, vw, vh, rem.
Q96. CSS vs SCSS?
SCSS adds variables & nesting.
Q97. Print styles?
@media print {}Q98. Content-visibility?
Improves rendering speed.
Q99. Modern CSS layout?
Flexbox & Grid.
Q100. Best CSS practice?
Reusable, responsive, modular CSS.
No comments:
Post a Comment