100 CSS Coding Questions & Answers
Beginner Level
Q1. What is CSS?
CSS stands for Cascading Style Sheets.
Q2. CSS syntax.
selector {
property: value;
}
Q3. Inline CSS example.
<p style="color:red;">Text</p>
Q4. Internal CSS example.
<style>
p { color: blue; }
</style>
Q5. External CSS link.
<link rel="stylesheet" href="style.css">
Q6. Change text color.
color: red;
Q7. Change background color.
background-color: yellow;
Q8. Increase font size.
font-size: 20px;
Q9. Make text bold.
font-weight: bold;
Q10. Center text.
text-align: center;
Intermediate Level
Q11. Class selector.
.box { color: red; }Q12. ID selector.
#header { background: gray; }Q13. Difference between class & id.
Class is reusable, ID is unique.
Q14. Box model.
Content, Padding, Border, Margin
Q15. Add margin & padding.
margin: 10px; padding: 20px;
Q16. Add border.
border: 1px solid black;
Q17. Hide element.
display: none;
Q18. Visibility hidden.
visibility: hidden;
Q19. Float left.
float: left;
Q20. Clear float.
clear: both;
Q21. Position relative.
position: relative;
Q22. Position absolute.
position: absolute;
Q23. Z-index.
z-index: 10;
Q24. Overflow hidden.
overflow: hidden;
Q25. Cursor pointer.
cursor: pointer;
Advanced Level
Q26. Flexbox container.
display: flex;
Q27. Center using flex.
display: flex; justify-content: center; align-items: center;
Q28. Flex direction column.
flex-direction: column;
Q29. CSS Grid.
display: grid;
Q30. Two-column grid.
grid-template-columns: 1fr 1fr;
Q31. Media query.
@media (max-width:600px) {
body { background:red; }
}
Q32. Hover effect.
a:hover { color:red; }Q33. Transition.
transition: all 0.3s;
Q34. Transform scale.
transform: scale(1.2);
Q35. Rotate element.
transform: rotate(45deg);
Q36. Box shadow.
box-shadow: 0 2px 6px #000;
Q37. Text shadow.
text-shadow: 1px 1px black;
Q38. Opacity.
opacity: 0.5;
Q39. Animation keyframes.
@keyframes move {
from { left:0; }
to { left:100px; }
}
Q40. Apply animation.
animation: move 2s infinite;
Advanced & Interview Level
Q41. CSS variable.
:root { --main:red; }
color: var(--main);
Q42. Calc function.
width: calc(100% - 50px);
Q43. Aspect ratio.
aspect-ratio: 16/9;
Q44. Object-fit.
object-fit: cover;
Q45. rem vs px.
rem is relative, px is fixed.
Q46. Sticky position.
position: sticky; top:0;
Q47. Background image.
background-image: url(img.jpg);
Q48. No-repeat background.
background-repeat: no-repeat;
Q49. Center background.
background-position: center;
Q50. Best practice.
Use external CSS & responsive design.
CSS Coding Questions & Answers
Q51. Set a fixed width container and center it.
.container {
width: 1200px;
margin: auto;
}
Q52. Make a div full screen.
div {
width: 100vw;
height: 100vh;
}
Q53. Center text vertically and horizontally.
.box {
display: flex;
justify-content: center;
align-items: center;
}
Q54. Create a sticky header.
header {
position: sticky;
top: 0;
}
Q55. Hide scrollbar but allow scrolling.
.container {
overflow: auto;
}
.container::-webkit-scrollbar {
display: none;
}
Q56. Add smooth scrolling.
html {
scroll-behavior: smooth;
}
Q57. Create a shadow card.
.card {
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
Q58. Add hover zoom effect.
img:hover {
transform: scale(1.1);
}
Q59. Create a gradient background.
background: linear-gradient(to right, #3b82f6, #9333ea);
Q60. Make text uppercase.
text-transform: uppercase;
Q61. Limit text to one line with ellipsis.
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Q62. Create a responsive grid.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Q63. Create a circular image.
img {
border-radius: 50%;
}
Q64. Fix footer at bottom.
footer {
position: fixed;
bottom: 0;
width: 100%;
}
Q65. Change cursor to pointer.
cursor: pointer;
Q66. Add transition effect.
transition: all 0.3s ease;
Q67. Disable text selection.
user-select: none;
Q68. Make image responsive.
img {
max-width: 100%;
height: auto;
}
Q69. Set minimum height.
min-height: 300px;
Q70. Apply opacity.
opacity: 0.7;
Q71. Align items to bottom in flex.
align-items: flex-end;
Q72. Control z-index.
z-index: 10;
Q73. Add background image.
background-image: url("img.jpg");
Q74. Prevent background repeat.
background-repeat: no-repeat;
Q75. Cover background image.
background-size: cover;
Q76. Set font family.
font-family: Arial, sans-serif;
Q77. Bold text.
font-weight: bold;
Q78. Change line height.
line-height: 1.6;
Q79. Add border radius.
border-radius: 10px;
Q80. Create tooltip using title.
.tooltip {
position: relative;
}
Q81. Make element invisible but keep space.
visibility: hidden;
Q82. Completely hide element.
display: none;
Q83. Set max width.
max-width: 800px;
Q84. Align text center.
text-align: center;
Q85. Change overflow behavior.
overflow-x: hidden;
Q86. Make flex items wrap.
flex-wrap: wrap;
Q87. Change order of flex item.
order: 2;
Q88. Set aspect ratio.
aspect-ratio: 16 / 9;
Q89. Use CSS variable.
:root {
--main-color: #2563eb;
}
color: var(--main-color);
Q90. Use calc() function.
width: calc(100% - 40px);
Q91. Add blur filter.
filter: blur(4px);
Q92. Create grayscale image.
filter: grayscale(100%);
Q93. Apply transform rotate.
transform: rotate(10deg);
Q94. Create animation.
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
Q95. Apply animation.
animation: fade 1s ease-in;
Q96. Use media query.
@media (max-width:600px) {
body { font-size: 14px; }
}
Q97. Make element clickable.
pointer-events: auto;
Q98. Disable clicks.
pointer-events: none;
Q99. Create modern button style.
button {
padding: 10px 20px;
background: #2563eb;
color: white;
border-radius: 6px;
}
Q100. Best CSS practice.
Use Flexbox/Grid, CSS variables, responsive units, and modular styles.
No comments:
Post a Comment