CSS Interview Question & Solution Set
1. How do you change the color of text in CSS?
Solution:
Use the color property to change the text color.
p {
color: red;
}2. How do you add a background color to an element in CSS?
Solution:
Use the background-color property.
div {
background-color: blue;
}3. How do you center text horizontally in CSS?
Solution:
Use the text-align property with the value center.
h1 {
text-align: center;
}4. How do you change the font size in CSS?
Solution:
Use the font-size property to set the size of the text.
p {
font-size: 16px;
}5. How do you make text bold in CSS?
Solution:
Use the font-weight property with the value bold.
strong {
font-weight: bold;
}6. How do you italicize text in CSS?
Solution:
Use the font-style property with the value italic.
em {
font-style: italic;
}7. How do you apply a background image to an element in CSS?
Solution:
Use the background-image property.
body {
background-image: url('image.jpg');
}8. How do you create a border around an element in CSS?
Solution:
Use the border property to specify the width, style, and color.
div {
border: 2px solid black;
}9. How do you round the corners of a box in CSS?
Solution:
Use the border-radius property.
div {
border-radius: 10px;
}10. How do you create a shadow around an element in CSS?
Solution:
Use the box-shadow property.
div {
box-shadow: 5px 5px 10px gray;
}11. How do you add space between elements in CSS?
Solution:
Use the margin property for external space and padding property for internal space.
div {
margin: 10px;
padding: 15px;
}12. How do you change the font of text in CSS?
Solution:
Use the font-family property.
p {
font-family: Arial, sans-serif;
}13. How do you make an element invisible in CSS?
Solution:
Use the display property with the value none or visibility with hidden.
div {
display: none;
}
span {
visibility: hidden;
}14. How do you create a hover effect in CSS?
Solution:
Use the :hover pseudo-class.
a:hover {
color: green;
}15. How do you align an element to the center of the page in CSS?
Solution:
Use margin: auto for block elements with a defined width.
div {
width: 50%;
margin: auto;
}16. How do you set an element to float left or right in CSS?
Solution:
Use the float property.
div {
float: left;
}17. How do you clear floating elements in CSS?
Solution:
Use the clear property.
div {
clear: both;
}18. How do you make an element take up the full width of its container in CSS?
Solution:
Use the width property with a value of 100%.
div {
width: 100%;
}19. How do you position an element at the top right of the page in CSS?
Solution:
Use the position property with the value absolute and set top and right properties.
div {
position: absolute;
top: 0;
right: 0;
}20. How do you add space between lines of text in CSS?
Solution:
Use the line-height property.
p {
line-height: 1.5;
}21. How do you add space between letters in CSS?
Solution:
Use the letter-spacing property.
h1 {
letter-spacing: 2px;
}22. How do you change the cursor to a pointer when hovering over an element in CSS?
Solution:
Use the cursor property with the value pointer.
button {
cursor: pointer;
}23. How do you create a fixed header in CSS?
Solution:
Use the position property with the value fixed.
header {
position: fixed;
top: 0;
width: 100%;
}24. How do you add transparency to an element in CSS?
Solution:
Use the opacity property.
div {
opacity: 0.5;
}25. How do you create a CSS animation?
Solution:
Use @keyframes and the animation property.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation: example 5s infinite;
}26. How do you add a gradient background in CSS?
Solution:
Use the background property with the linear-gradient function.
div {
background: linear-gradient(to right, red, yellow);
}27. How do you make an element sticky in CSS?
Solution:
Use the position property with the value sticky.
nav {
position: sticky;
top: 0;
}28. How do you hide an element but keep its space in CSS?
Solution:
Use the visibility property with the value hidden.
div {
visibility: hidden;
}29. How do you create a CSS grid layout?
Solution:
Use the display: grid property.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}30. How do you make a flexbox container in CSS?
Solution:
Use display: flex on a container element.
.container {
display: flex;
}31. How do you center an element vertically and horizontally with flexbox?
Solution:
Use justify-content and align-items with center.
.container {
display: flex;
justify-content: center;
align-items: center;
}32. How do you create a CSS transition?
Solution:
Use the transition property.
div {
transition: background-color 2s;
}
div:hover {
background-color: yellow;
}33. How do you change the order of flexbox items?
Solution:
Use the order property on individual flexbox items.
.item1 {
order: 2;
}
.item2 {
order: 1;
}34. How do you make an element scrollable in CSS?
Solution:
Use the overflow property with the value scroll or auto.
div {
overflow: auto;
}35. How do you create a responsive layout in CSS?
Solution:
Use media queries to adjust styles based on screen size.
@media only screen and (max-width: 600px) {
div {
width: 100%;
}
}36. How do you use CSS variables?
Solution:
Define a variable using -- inside a :root selector, then use var() to apply it.
:root {
--main-color: blue;
}
div {
color: var(--main-color);
}37. How do you set the minimum width of an element in CSS?
Solution:
Use the min-width property.
div {
min-width: 200px;
}38. How do you create a circle in CSS?
Solution:
Use the border-radius property with a value of 50% on a square element.
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}39. How do you make an image responsive in CSS?
**Solution
:**
Use the max-width property with a value of 100%.
img {
max-width: 100%;
height: auto;
}40. How do you align items in a grid layout in CSS?
Solution:
Use the align-items property.
.grid-container {
display: grid;
align-items: center;
}41. How do you set an element to be hidden on mobile devices in CSS?
Solution:
Use a media query to set display: none for small screens.
@media only screen and (max-width: 600px) {
div {
display: none;
}
}42. How do you style the first letter of a paragraph in CSS?
Solution:
Use the ::first-letter pseudo-element.
p::first-letter {
font-size: 2em;
color: red;
}43. How do you style links differently when they are visited in CSS?
Solution:
Use the :visited pseudo-class.
a:visited {
color: purple;
}44. How do you create a fixed footer in CSS?
Solution:
Use the position property with the value fixed.
footer {
position: fixed;
bottom: 0;
width: 100%;
}45. How do you make a text field fill the available width of its container in CSS?
Solution:
Use the width property with a value of 100%.
input {
width: 100%;
}46. How do you prevent an element from being selected in CSS?
Solution:
Use the user-select property with the value none.
div {
user-select: none;
}47. How do you add a scrollbar to a specific element in CSS?
Solution:
Use the overflow property with the value scroll.
div {
overflow: scroll;
}48. How do you change the style of a list marker in CSS?
Solution:
Use the list-style property.
ul {
list-style: square;
}49. How do you center a div vertically and horizontally using CSS grid?
Solution:
Use the place-items property.
.container {
display: grid;
place-items: center;
}50. How do you set an element to be invisible but still take up space in CSS?
Solution:
Use the visibility property with the value hidden.
div {
visibility: hidden;
}51. How do you add a border only to the top of an element in CSS?
Solution:
Use the border-top property.
div {
border-top: 2px solid black;
}52. How do you change the shape of a cursor in CSS?
Solution:
Use the cursor property.
div {
cursor: pointer;
}53. How do you make an element fade in using CSS animations?
Solution:
Use @keyframes with opacity and apply the animation property.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation: fadeIn 2s;
}54. How do you create a full-page background image in CSS?
Solution:
Use the background-size property with the value cover.
body {
background-image: url('background.jpg');
background-size: cover;
}55. How do you apply different styles to odd and even elements in a list in CSS?
Solution:
Use the :nth-child() pseudo-class with odd or even.
li:nth-child(odd) {
background-color: lightgray;
}
li:nth-child(even) {
background-color: white;
}56. How do you limit the number of lines of text displayed in a paragraph in CSS?
Solution:
Use the -webkit-line-clamp property with overflow, display, and text-overflow.
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}57. How do you set a default style for all elements in a webpage using CSS?
Solution:
Use the universal selector *.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}58. How do you apply a different style to the first element in a list in CSS?
Solution:
Use the :first-child pseudo-class.
li:first-child {
font-weight: bold;
}59. How do you add a shadow to text in CSS?
Solution:
Use the text-shadow property.
h1 {
text-shadow: 2px 2px 4px gray;
}60. How do you set the height of an element to fit the entire screen height in CSS?
Solution:
Use the height property with a value of 100vh.
div {
height: 100vh;
}61. How do you create a drop-down menu in CSS?
Solution:
Use display: none for the drop-down content and display: block on hover.
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content {
display: block;
}62. How do you create a button with rounded corners in CSS?
Solution:
Use the border-radius property.
button {
border-radius: 5px;
}63. How do you change the background color of the body element in CSS?
Solution:
Use the background-color property.
body {
background-color: lightblue;
}64. How do you set the width of a table in CSS?
Solution:
Use the width property.
table {
width: 100%;
}65. How do you make a link open in a new tab in HTML and CSS?
Solution:
Use the target="_blank" attribute in HTML.
<a href="https://www.example.com" target="_blank">Click Here</a>66. How do you style form input elements in CSS?
Solution:
Use the input selector to style form elements.
input {
padding: 10px;
border: 1px solid gray;
}67. How do you change the style of the first line of a paragraph in CSS?
Solution:
Use the ::first-line pseudo-element.
p::first-line {
font-weight: bold;
color: red;
}68. How do you make an image circular in CSS?
Solution:
Use the border-radius property with 50% on a square image.
img {
border-radius: 50%;
}69. How do you prevent text from wrapping in CSS?
Solution:
Use the white-space property with the value nowrap.
p {
white-space: nowrap;
}70. How do you create a navigation bar using CSS flexbox?
Solution:
Use display: flex and justify-content to space out links.
nav {
display: flex;
justify-content: space-around;
}71. How do you create a horizontal line in CSS?
Solution:
Use the <hr> element in HTML and style it with CSS.
hr {
border: 1px solid black;
}72. How do you create a tooltip in CSS?
Solution:
Use the ::after pseudo-element with content.
.tooltip:hover::after {
content: 'Tooltip text';
background-color: black;
color: white;
padding: 5px;
}73. How do you create a vertical divider in CSS?
Solution:
Use the border-left property.
div {
border-left: 2px solid gray;
height: 100px;
}74. How do you create a sticky element that sticks to the top of the page when scrolling?
Solution:
Use position: sticky with top: 0.
header {
position: sticky;
top: 0;
}
