Want to stop feeling stuck every time you try to style a page and finally feel truly in control of your layouts? That exciting breakthrough starts right here. This post gives you 100 CSS practice problems with clear, step-by-step solutions that make learning feel natural and genuinely rewarding.
You’ll begin with simple selectors, colors, and spacing, then confidently move on to flexbox, grid, positioning, animations, and responsive design—challenges that turn everyday frustrations into “I did it!” moments.
Each problem is written in plain, simple language so you can try the code yourself, check the solution, and actually understand the why behind every style. Whether you’re a beginner falling in love with design or a developer preparing for a front-end interview, these exercises will help you feel creative, capable, and deeply proud of the pages you build.
Pick a problem, start styling, and watch your confidence come to life.
Also try it: 100 HTML practice problems with solutions
1. Change the text color of all paragraphs to blue.
css
p {
color: blue;
}
2. Set the background color of the entire page to light gray.
css
body {
background-color: lightgray;
}
3. Make all headings (h1 to h6) have a font family of Arial.
css
h1, h2, h3, h4, h5, h6 {
font-family: Arial, sans-serif;
}
4. Center align the text inside all div elements.
css
div {
text-align: center;
}
5. Add a solid black border of 2px width to all images.
css
img {
border: 2px solid black;
}
6. Give all buttons a rounded corner of 5px and a green background.
css
button {
border-radius: 5px;
background-color: green;
color: white;
}
7. Remove the underline from all links.
css
a {
text-decoration: none;
}
8. Set the font size of all list items to 18px.
css
li {
font-size: 18px;
}
9. Make the first letter of every paragraph larger and red.
css
p::first-letter {
font-size: 200%;
color: red;
}
10. Apply a box shadow to all cards (class .card).
css
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
11. Create a sticky header that stays at the top when scrolling.
css
header {
position: sticky;
top: 0;
background-color: white;
}
12. Use flexbox to center a div inside another div both horizontally and vertically.
css
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
13. Create a three‑column layout using CSS Grid.
css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
14. Set an element with class box to have 10px padding on all sides.
css
.box {
padding: 10px;
}
15. Give an element a margin of 20px on the top and bottom, and 30px left and right.
css
.element {
margin: 20px 30px;
}
16. Hide an element with class invisible without removing its layout space.
css
.invisible {
visibility: hidden;
}
17. Completely remove an element (make it not take any space).
css
.hidden {
display: none;
}
18. Create a responsive image that scales with its container but never exceeds its original size.
css
img {
max-width: 100%;
height: auto;
}
19. Set a fixed width of 300px and a height of 200px for an element with class thumbnail.
css
.thumbnail {
width: 300px;
height: 200px;
}
20. Make the background of an element a gradient from top to bottom (blue to green).
css
.gradient {
background: linear-gradient(blue, green);
}
21. Change the cursor to a pointer when hovering over a button.
css
button:hover {
cursor: pointer;
}
22. Increase the opacity of an image to 0.8 when hovered.
css
img:hover {
opacity: 0.8;
}
23. Apply a transition to a button that changes background color over 0.3 seconds.
css
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: darkblue;
}
24. Create a simple loading spinner using CSS border and border radius.
css
.spinner {
width: 40px;
height: 40px;
border: 4px solid lightgray;
border-top: 4px solid blue;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
25. Make a container use Flexbox and allow items to wrap to the next line.
css
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
26. Set the z‑order of an element so it appears above another overlapping element.
css
.front {
position: relative;
z-index: 10;
}
.back {
position: relative;
z-index: 1;
}
27. Create a fixed footer at the bottom of the page.
css
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
28. Make the first child of a container have a red border.
css
.container :first-child {
border: 1px solid red;
}
29. Style every even‑numbered list item with a light gray background.
css
li:nth-child(even) {
background-color: lightgray;
}
30. Increase the line height of all paragraphs to 1.6.
css
p {
line-height: 1.6;
}
31. Add a drop shadow to text in an h1 element.
css
h1 {
text-shadow: 2px 2px 4px gray;
}
32. Create a circular avatar using border‑radius.
css
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
33. Make a div scrollable horizontally when content overflows.
css
.scroll-x {
overflow-x: auto;
white-space: nowrap;
}
34. Disable text selection on a specific element.
css
.no-select {
user-select: none;
}
35. Apply a CSS filter to make an image grayscale.
css
img {
filter: grayscale(100%);
}
36. Position an element absolutely inside a relative container.
css
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 10px;
left: 10px;
}
37. Create a flexbox row where items are spaced evenly with equal gaps.
css
.flex-spread {
display: flex;
justify-content: space-between;
}
38. Make all hyperlinks visited have a purple color.
css
a:visited {
color: purple;
}
39. Style the placeholder text of an input field to be italic and gray.
css
input::placeholder {
font-style: italic;
color: gray;
}
40. Add a smooth scroll behavior to the entire page.
css
html {
scroll-behavior: smooth;
}
41. Create an overlay that covers the whole page (full‑screen black with 0.5 opacity).
css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
42. Make a tooltip appear on hover (requires HTML structure).
css
.tooltip {
position: relative;
}
.tooltip:hover::after {
content: "Tooltip text";
position: absolute;
background: black;
color: white;
padding: 5px;
border-radius: 5px;
top: -30px;
left: 0;
}
43. Use media query to change background color on screens smaller than 600px.
css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
44. Set the maximum width of a container to 1200px and center it.
css
.container {
max-width: 1200px;
margin: 0 auto;
}
45. Create a grid that has a sidebar of 250px and main content taking the rest.
css
.grid-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}
46. Rotate an element 45 degrees on hover.
css
.rotate:hover {
transform: rotate(45deg);
transition: transform 0.3s;
}
47. Scale an image to 1.2 times its size when hovered.
css
.image-scale {
transition: transform 0.3s;
}
.image-scale:hover {
transform: scale(1.2);
}
48. Add a border only on the bottom of an element.
css
.border-bottom {
border-bottom: 2px solid black;
}
49. Use calc() to set width as 100% minus 50px.
css
.calc-width {
width: calc(100% - 50px);
}
50. Style a checkbox to be larger and with a custom checkmark (basic).
css
input[type="checkbox"] {
transform: scale(1.5);
accent-color: green;
}
Also try it: 100 JavaScript (JS) practice problems with solutions
51. Make a paragraph have a first line indented by 20px.
css
p {
text-indent: 20px;
}
52. Give a dotted outline to an element when focused.
css
input:focus {
outline: 2px dotted red;
}
53. Use the ::before pseudo-element to insert a star before each list item.
css
li::before {
content: "★ ";
color: gold;
}
54. Make all disabled input fields have a light gray background.
css
input:disabled {
background-color: lightgray;
}
55. Create a background image for the body that covers the whole viewport and does not repeat.
css
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
56. Add a CSS variable for primary color and use it.
css
:root {
--primary: #3498db;
}
.button {
background-color: var(--primary);
}
57. Create an animation that fades an element in over 2 seconds.
css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade {
animation: fadeIn 2s ease-in;
}
58. Make text uppercase, lowercase, and capitalize in three different classes.
css
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
59. Apply a blur filter to an image on hover.
css
img:hover {
filter: blur(2px);
}
60. Create a simple card with hover lift effect using box-shadow and transform.
css
.card {
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
61. Set the minimum height of a section to 400px and allow it to grow.
css
section {
min-height: 400px;
height: auto;
}
62. Align an element to the right side of its container using float (old method).
css
.float-right {
float: right;
}
63. Use the ::selection pseudo-element to change highlight color.
css
::selection {
background-color: yellow;
color: black;
}
64. Create a striped table effect (alternating row colors).
css
tr:nth-child(even) {
background-color: #f2f2f2;
}
65. Place a background image and set it to not scroll with the page (fixed).
css
body {
background-image: url('bg.jpg');
background-attachment: fixed;
}
66. Use CSS grid to create a responsive gallery that shows 3 columns on desktop, 2 on tablet, 1 on mobile.
css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
67. Limit text to two lines and add an ellipsis.
css
.truncate {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
68. Make an element invisible while still being read by screen readers.
css
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
}
69. Create a spinner with pure CSS (rotate circle) – already done in #24.
70. Add a transition on width change when hovering a div.
css
div {
width: 100px;
transition: width 0.5s;
}
div:hover {
width: 200px;
}
71. Style an element when it is the target of a URL fragment using :target.
css
:target {
background-color: gold;
}
72. Apply a different style to a link when it is being clicked (active).
css
a:active {
color: red;
}
73. Use clip-path to make an image appear as a hexagon shape.
css
.hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
74. Create a flex container where the last item aligns to the end (stretch by default).
css
.flex-end-last {
display: flex;
}
.flex-end-last .last {
margin-left: auto;
}
75. Make the font of the entire page ‘Roboto’ with fallback to sans‑serif.
css
body {
font-family: 'Roboto', sans-serif;
}
76. Add a border radius only to the top‑left and bottom‑right corners.
css
.custom-radius {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
77. Use the :not() pseudo‑class to style all inputs except submit buttons.
css
input:not([type="submit"]) {
background-color: lightyellow;
}
78. Create a layout where one column takes 2 times the width of the other (grid).
css
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
}
79. Make a horizontal rule <hr> stylish with gradient and height.
css
hr {
height: 4px;
background: linear-gradient(to right, transparent, black, transparent);
border: none;
}
80. Use counter‑increment to number headings automatically.
css
body { counter-reset: section; }
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
81. Apply a CSS mask to an image (simple grayscale or gradient mask).
css
.masked {
mask-image: linear-gradient(black, transparent);
-webkit-mask-image: linear-gradient(black, transparent);
}
82. Use scroll-margin-top to offset scroll position for anchor links.
css
section {
scroll-margin-top: 80px;
}
83. Create a sticky sidebar that remains in view while scrolling.
css
.sidebar {
position: sticky;
top: 20px;
}
84. Change the bullet style of an unordered list to squares.
css
ul {
list-style-type: square;
}
85. Add a gradient border to a button (outline).
css
.gradient-border {
border: 2px solid;
border-image: linear-gradient(45deg, red, blue) 1;
}
86. Use currentColor to make an SVG icon inherit the text color.
css
.icon {
fill: currentColor;
}
87. Create an animated pulse effect on a button.
css
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 1s infinite;
}
88. Make text overflow with ellipsis on a single line.
css
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
89. Use column-count to create a multi‑column text layout.
css
.columns {
column-count: 3;
column-gap: 20px;
}
90. Add a background blend mode to an image.
css
.blend {
background-image: url('bg.jpg');
background-color: blue;
background-blend-mode: multiply;
}
91. Create a custom scrollbar for a div.
css
.custom-scroll::-webkit-scrollbar {
width: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
92. Apply a perspective effect to a 3D card on hover.
css
.card-3d {
perspective: 1000px;
}
.card-3d:hover {
transform: rotateY(15deg);
}
93. Darken an overlay when hovering a parent container.
css
.parent {
position: relative;
}
.parent::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: background 0.3s;
}
.parent:hover::after {
background: rgba(0,0,0,0.5);
}
94. Use logical properties for margin (block start, inline end).
css
.logical {
margin-block-start: 20px;
margin-inline-end: 30px;
}
95. Set an element’s aspect-ratio to 16/9.
css
.video-container {
aspect-ratio: 16 / 9;
}
96. Allow a flex child to grow but not shrink.
css
.flex-child {
flex-grow: 1;
flex-shrink: 0;
}
97. Use content property with a counter to display the number of items.
css
body { counter-reset: item; }
.item { counter-increment: item; }
.item::after {
content: " #" counter(item);
}
98. Create a wave background using SVG data URI.
css
.wave-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='blue' d='M0,64L48,58.7C96,53,192,43,288,48C384,53,480,75,576,85.3C672,96,768,96,864,85.3C960,75,1056,53,1152,48L1200,43L1200,120L1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
99. Use the :focus-visible pseudo‑class to style keyboard focus but not mouse clicks.
css
button:focus-visible {
outline: 3px solid orange;
}
100. Create a full‑screen hero section with a dark overlay on background image.
css
.hero {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
Also try it: 100 PHP practice problems with solutions
Final Thoughts
Completing these CSS practice problems with solutions is an important step toward building strong styling and layout skills. By working through different types of questions, you have explored essential CSS concepts such as selectors, properties, box model, positioning, flexbox, grid, responsiveness, and visual styling techniques.
Regular practice helps you understand how CSS behaves in real-world scenarios and improves your ability to design clean, responsive, and visually appealing web pages. Reviewing the solutions also allows you to identify mistakes, learn better approaches, and strengthen your overall problem-solving skills.
To continue improving, try creating your own layouts, experimenting with modern CSS features, and practicing responsive design using Flexbox and Grid. The more projects and exercises you complete, the more confident and efficient you will become in writing CSS code.
Keep practicing consistently, explore new styling techniques, and challenge yourself with advanced problems to become a skilled and confident CSS developer.