A comprehensive list of CSS Interview questions & solutions with code examples
1. How do you change the background color of an element in CSS?
Solution:
Use the background-color property.
element {
background-color: #ffcc00;
}2. How do you set the font size of text in CSS?
Solution:
Use the font-size property.
element {
font-size: 16px;
}3. How do you center text horizontally in CSS?
Solution:
Use the text-align property with the value center.
element {
text-align: center;
}4. How do you set the margin of an element in CSS?
Solution:
Use the margin property.
element {
margin: 20px;
}5. How do you set the padding of an element in CSS?
Solution:
Use the padding property.
element {
padding: 10px;
}6. How do you change the border color of an element in CSS?
Solution:
Use the border-color property.
element {
border-color: #000000;
}7. How do you create a border around an element in CSS?
Solution:
Use the border property.
element {
border: 1px solid #000000;
}8. How do you make an element’s text bold in CSS?
Solution:
Use the font-weight property with the value bold.
element {
font-weight: bold;
}9. How do you make an element’s text italic in CSS?
Solution:
Use the font-style property with the value italic.
element {
font-style: italic;
}10. How do you set the width of an element in CSS?
Solution:
Use the width property.
element {
width: 200px;
}11. How do you set the height of an element in CSS?
Solution:
Use the height property.
element {
height: 100px;
}12. How do you hide an element in CSS?
Solution:
Use the display property with the value none.
element {
display: none;
}13. How do you show an element that was previously hidden in CSS?
Solution:
Use the display property with the value block or other appropriate value.
element {
display: block;
}14. How do you add a shadow to text in CSS?
Solution:
Use the text-shadow property.
element {
text-shadow: 2px 2px 5px #888888;
}15. How do you change the font family of an element in CSS?
Solution:
Use the font-family property.
element {
font-family: Arial, sans-serif;
}16. How do you set the font color of text in CSS?
Solution:
Use the color property.
element {
color: #ff0000;
}17. How do you align an image in CSS?
Solution:
Use the text-align property on the parent element or the float property on the image itself.
.parent {
text-align: center;
}
img {
float: left;
}18. How do you create a CSS class?
Solution:
Define a class using the . selector.
.classname {
/* CSS rules here */
}19. How do you apply a CSS class to an element?
Solution:
Add the class name to the element’s class attribute.
<div class="classname">Content</div>20. How do you create a CSS ID selector?
Solution:
Define an ID using the # selector.
#idname {
/* CSS rules here */
}21. How do you apply a CSS ID to an element?
Solution:
Add the ID name to the element’s id attribute.
<div id="idname">Content</div>22. How do you use a CSS pseudo-class?
Solution:
Use the : selector followed by the pseudo-class name.
a:hover {
color: red;
}23. How do you set a background image for an element in CSS?
Solution:
Use the background-image property.
element {
background-image: url('image.jpg');
}24. How do you set the background image to cover the entire element in CSS?
Solution:
Use the background-size property with the value cover.
element {
background-image: url('image.jpg');
background-size: cover;
}25. How do you position an element absolutely in CSS?
Solution:
Use the position property with the value absolute and set the position using top, right, bottom, and left.
element {
position: absolute;
top: 10px;
left: 20px;
}26. How do you center an element horizontally with CSS?
Solution:
Use the margin property with the value auto and set the width.
element {
width: 50%;
margin: 0 auto;
}27. How do you center an element vertically with CSS?
Solution:
Use the flexbox layout or the position property with transform.
.parent {
display: flex;
align-items: center;
justify-content: center;
}
element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}28. How do you create a responsive layout with CSS?
Solution:
Use media queries to apply different styles for different screen sizes.
@media (max-width: 600px) {
element {
font-size: 12px;
}
}29. How do you create a grid layout with CSS?
Solution:
Use the grid display property.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
grid-column: span 2;
}30. How do you create a flexbox layout in CSS?
Solution:
Use the flex display property.
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}31. How do you create a CSS animation?
Solution:
Use the @keyframes rule and the animation property.
@keyframes example {
from { background-color: red; }
to { background-color: blue; }
}
element {
animation: example 5s infinite;
}32. How do you set a CSS transition?
Solution:
Use the transition property.
element {
transition: background-color 0.5s ease;
}
element:hover {
background-color: blue;
}33. How do you create a CSS tooltip?
Solution:
Use the ::after pseudo-element and the content property.
.tooltip {
position: relative;
}
.tooltip::after {
content: "Tooltip text";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
}34. How do you use a custom font in CSS?
Solution:
Use the @font-face rule.
@font-face {
font-family: 'MyCustomFont';
src: url('font.woff2') format('woff2');
}
element {
font-family: 'MyCustomFont', sans-serif;
}35. How do you add a CSS border radius?
Solution:
Use the border-radius property.
element {
border-radius: 10px;
}36. How do you create a CSS circle?
Solution:
Use the border-radius property with a 50% value.
element {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}37. How do you create a CSS triangle?
**
Solution:**
Use the border property with transparent borders.
element {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}38. How do you set the z-index of an element in CSS?
Solution:
Use the z-index property.
element {
position: absolute;
z-index: 10;
}39. How do you make a text uppercase in CSS?
Solution:
Use the text-transform property with the value uppercase.
element {
text-transform: uppercase;
}40. How do you set the line height of text in CSS?
Solution:
Use the line-height property.
element {
line-height: 1.5;
}41. How do you create a CSS hover effect?
Solution:
Use the :hover pseudo-class.
element:hover {
background-color: yellow;
}42. How do you set a fixed position element in CSS?
Solution:
Use the position property with the value fixed.
element {
position: fixed;
top: 0;
right: 0;
}43. How do you create a CSS column layout?
Solution:
Use the column-count property.
element {
column-count: 3;
}44. How do you remove bullets from a list in CSS?
Solution:
Use the list-style-type property with the value none.
ul {
list-style-type: none;
}45. How do you add a CSS gradient background?
Solution:
Use the background-image property with a gradient value.
element {
background-image: linear-gradient(to right, red, yellow);
}46. How do you create a CSS overlay effect?
Solution:
Use the ::before pseudo-element with position: absolute.
.container {
position: relative;
}
.overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}47. How do you create a responsive grid layout with CSS?
Solution:
Use flexbox or grid with media queries for responsiveness.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}48. How do you create a CSS sticky header?
Solution:
Use the position property with the value sticky.
header {
position: sticky;
top: 0;
}49. How do you create a CSS card layout?
Solution:
Use flexbox or grid to arrange cards.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 200px;
margin: 10px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}50. How do you create a CSS flip effect?
Solution:
Use the transform property with rotateY.
.card {
perspective: 1000px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}51. How do you create a CSS dropdown menu?
Solution:
Use position: absolute and display: none to hide/show the dropdown.
.menu {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ddd;
}
.menu:hover .dropdown {
display: block;
}52. How do you create a CSS tooltip?
Solution:
Use the ::after pseudo-element with content for the tooltip text.
.tooltip {
position: relative;
}
.tooltip::after {
content: "Tooltip text";
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px;
border-radius: 4px;
white-space: nowrap;
display: none;
}
.tooltip:hover::after {
display: block;
}53. How do you apply a CSS filter effect?
Solution:
Use the filter property.
element {
filter: grayscale(100%);
}54. How do you create a CSS animation that moves an element?
Solution:
Use the @keyframes rule and the animation property.
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
element {
animation: move 2s infinite;
}55. How do you add CSS custom properties (variables)?
Solution:
Use the --variable-name syntax.
:root {
--main-color: #3498db;
}
element {
color: var(--main-color);
}56. How do you create a CSS spinner (loading animation)?
Solution:
Use the @keyframes rule and the animation property.
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}57. How do you set text to be displayed as a block in CSS?
Solution:
Use the display property with the value block.
element {
display: block;
}58. How do you use a CSS transition to smoothly change the background color?
Solution:
Use the transition property with the background-color value.
element {
background-color: blue;
transition: background-color 0.3s ease;
}
element:hover {
background-color: green;
}59. How do you hide text but keep it accessible for screen readers in CSS?
Solution:
Use the position, clip, and width properties.
.hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}60. How do you use CSS variables with fallback values?
Solution:
Use the var() function with a fallback value.
element {
color: var(--main-color, #000000);
}61. How do you create a CSS dropdown menu with transitions?
Solution:
Use transition with opacity and visibility.
.dropdown {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu:hover .dropdown {
opacity: 1;
visibility: visible;
}62. How do you apply a CSS filter for blurring an element?
Solution:
Use the filter property with the blur value.
element {
filter: blur(5px);
}63. How do you create a CSS grid layout with equal-width columns?
Solution:
Use grid-template-columns with repeat and 1fr.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}64. How do you create a CSS table layout?
Solution:
Use display: table, display: table-row, and display: table-cell.
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
}65. How do you set a background image to repeat only horizontally in CSS?
Solution:
Use the background-repeat property with the value repeat-x.
element {
background-image: url('image.jpg');
background-repeat: repeat-x;
}66. How do you create a CSS sticky footer?
Solution:
Use the flexbox layout to ensure the footer sticks to
the bottom.
html, body {
height: 100%;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}67. How do you create a CSS responsive image?
Solution:
Use width: 100% and height: auto to make images responsive.
img {
width: 100%;
height: auto;
}68. How do you create a CSS shadow effect on an element?
Solution:
Use the box-shadow property.
element {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}69. How do you set the opacity of an element in CSS?
Solution:
Use the opacity property.
element {
opacity: 0.5;
}70. How do you use CSS flexbox to align items vertically?
Solution:
Use align-items with the center value.
.container {
display: flex;
align-items: center;
}71. How do you use CSS flexbox to space items evenly?
Solution:
Use justify-content with the space-between or space-around value.
.container {
display: flex;
justify-content: space-between;
}72. How do you create a CSS media query for devices wider than 600px?
Solution:
Use the @media rule with a min-width condition.
@media (min-width: 600px) {
element {
font-size: 20px;
}
}73. How do you create a CSS overlay with a semi-transparent background?
Solution:
Use rgba for background color with transparency.
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}74. How do you set different font sizes for different screen sizes in CSS?
Solution:
Use media queries to apply different font-size values.
@media (max-width: 600px) {
element {
font-size: 14px;
}
}
@media (min-width: 601px) {
element {
font-size: 18px;
}
}75. How do you use CSS to create a vertical list?
Solution:
Use the list-style-type and display properties.
ul {
list-style-type: none;
}
li {
display: block;
}76. How do you create a CSS border with a different color on each side?
Solution:
Use individual border-color properties.
element {
border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
}77. How do you create a CSS image gallery with grid layout?
Solution:
Use display: grid with grid-template-columns.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}78. How do you create a CSS circle using border-radius?
Solution:
Set border-radius to 50% on a square element.
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}79. How do you style a CSS button with rounded corners?
Solution:
Use the border-radius property.
button {
border-radius: 8px;
}80. How do you create a CSS flexbox layout with equal-sized items?
Solution:
Use the flex property on the items.
.container {
display: flex;
}
.item {
flex: 1;
}81. How do you set a background image to cover the entire element in CSS?
Solution:
Use the background-size property with the value cover.
element {
background-image: url('image.jpg');
background-size: cover;
}82. How do you use CSS to create a responsive navigation menu?
Solution:
Use media queries and flexbox or grid.
.menu {
display: flex;
flex-direction: row;
}
@media (max-width: 600px) {
.menu {
flex-direction: column;
}
}83. How do you create a CSS animation that fades an element in and out?
Solution:
Use @keyframes and animation.
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
element {
animation: fade 2s infinite alternate;
}84. How do you add a CSS border to an image?
Solution:
Use the border property.
img {
border: 2px solid black;
}85. How do you create a CSS button with a gradient background?
Solution:
Use background-image with linear-gradient.
button {
background-image: linear-gradient(to right, red, orange);
}86. How do you create a CSS card with shadow and rounded corners?
Solution:
Use box-shadow and border-radius.
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 16px;
}87. How do you make a CSS image responsive?
Solution:
Use max-width and height.
img {
max-width: 100%;
height: auto;
}88. How do you create a CSS grid layout with fixed column widths?
Solution:
Use grid-template-columns with fixed values.
.container {
display: grid;
grid-template-columns: 100px 200px 300px;
}89. How do you create a CSS text underline with a different color?
Solution:
Use text-decoration with underline and text-decoration-color.
element {
text-decoration: underline;
text-decoration-color: red;
}90. How do you style a CSS form element with a border and padding?
Solution:
Use border and padding properties.
input {
border: 1px solid #ccc;
padding: 8px;
}91. How do you create a CSS grid layout with gaps between items?
Solution:
Use the gap property.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}92. How do you create a CSS section with alternating background colors?
Solution:
Use nth-child pseudo-class with background-color.
section:nth-child(odd) {
background-color: #f9f9f9;
}
section:nth-child(even) {
background-color: #fff;
}93. How do you create a CSS dropdown menu that opens on hover?
Solution:
Use display: none and display: block on hover.
.menu {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu:hover .dropdown {
display: block;
}94. How do you style a CSS link with different states (hover, active, visited)?
Solution:
Use the :link, :visited, :hover, and :active pseudo-classes.
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}95. How do you create a CSS grid layout with items spanning multiple columns?
Solution:
Use grid-column property.
.item {
grid-column: span 2;
}96. How do you create a CSS flexbox layout with items centered both vertically and horizontally?
Solution:
Use align-items and justify-content.
.container {
display: flex;
align-items: center;
justify-content: center;
}97. How do you create a CSS sticky element that sticks to the top of the viewport?
**
Solution:**
Use position: sticky with top property.
.sticky {
position: sticky;
top: 0;
}98. How do you use CSS to create a simple border radius effect?
Solution:
Use border-radius property.
element {
border-radius: 8px;
}99. How do you create a CSS responsive image gallery with flexbox?
Solution:
Use flexbox to arrange images.
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
flex: 1 0 21%; /* Adjust the percentage as needed */
margin: 10px;
}100. How do you create a CSS animation that scales an element up and down?
Solution:
Use @keyframes and transform.
@keyframes scale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
element {
animation: scale 2s infinite;
}
