CSS Examples & Practice
CSS Exercises
You learn CSS by writing it. These nine exercises each give you a task, a runnable starter to build on, and a worked solution. Try each one in the live editor before you look at the answer — struggling a little is where the learning happens. Topics range from basic selectors to flexbox and grid.
Exercise 1 — Color a heading
Task: make the heading teal (#0f766e) and the paragraph gray (#475569).
<!DOCTYPE html>
<html>
<head><style>
/* add your rules here */
</style></head>
<body>
<h1>Welcome</h1>
<p>Style me with CSS.</p>
</body>
</html><!DOCTYPE html>
<html>
<head><style>
h1 { color:#0f766e; }
p { color:#475569; }
</style></head>
<body>
<h1>Welcome</h1>
<p>Style me with CSS.</p>
</body>
</html>Exercise 2 — Class vs id selectors
Task: give elements with class note a yellow background, and the element with id lead bold text.
<!DOCTYPE html>
<html>
<head><style>
.note { background:#fef9c3; padding:8px; }
#lead { font-weight:700; }
</style></head>
<body>
<p id="lead">Important intro line.</p>
<p class="note">A side note.</p>
<p class="note">Another note.</p>
</body>
</html>Exercise 3 — Box model
Task: give the box 20px padding, a 3px solid blue border and 12px rounded corners.
<!DOCTYPE html>
<html>
<head><style>
.box { padding:20px; border:3px solid #2563eb;
border-radius:12px; width:200px; }
</style></head>
<body><div class="box">A styled box.</div></body>
</html>Exercise 4 — Center with flexbox
Task: center the card both horizontally and vertically in the viewport.
<!DOCTYPE html>
<html>
<head><style>
body { display:flex; align-items:center; justify-content:center;
height:100vh; margin:0; }
.card { padding:24px; background:#e0e7ff; border-radius:12px; }
</style></head>
<body><div class="card">Centered!</div></body>
</html>Exercise 5 — Horizontal nav with flexbox
Task: lay the list items out in a row with 16px gaps and remove the bullets.
<!DOCTYPE html>
<html>
<head><style>
ul { display:flex; gap:16px; list-style:none; padding:0; }
a { text-decoration:none; color:#0f766e; }
</style></head>
<body>
<ul><li><a href="#">Home</a></li><li><a href="#">About</a></li>
<li><a href="#">Contact</a></li></ul>
</body>
</html>Exercise 6 — Three-column grid
Task: place the six cells in a 3-column grid with 12px gaps.
<!DOCTYPE html>
<html>
<head><style>
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cell { background:#c7d2fe; padding:20px; text-align:center;
border-radius:8px; }
</style></head>
<body>
<div class="grid">
<div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
<div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
</div>
</body>
</html>Exercise 7 — Hover transition
Task: make the button darken and lift slightly on hover, with a smooth 0.2s transition.
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0; }
.btn { padding:12px 22px; border:none; border-radius:8px; color:#fff;
background:#22c55e; cursor:pointer; transition:.2s; }
.btn:hover { background:#16a34a; transform:translateY(-2px); }
</style></head>
<body><button class="btn">Hover me</button></body>
</html>Exercise 8 — Responsive layout
Task: show two columns on wide screens and one column below 600px using a media query.
<!DOCTYPE html>
<html>
<head><style>
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.col { background:#fde68a; padding:24px; border-radius:8px; }
@media (max-width:600px){ .row { grid-template-columns:1fr; } }
</style></head>
<body>
<div class="row"><div class="col">A</div><div class="col">B</div></div>
</body>
</html>Exercise 9 — Pseudo-element badge
Task: add the word NEW as a small red badge after the heading using ::after.
<!DOCTYPE html>
<html>
<head><style>
h2::after { content:"NEW"; font-size:11px; color:#fff;
background:#ef4444; padding:2px 8px; border-radius:999px;
margin-left:8px; vertical-align:middle; }
</style></head>
<body><h2>Latest internships</h2></body>
</html>Always attempt the exercise first, then compare with the solution. Notice which properties you forgot — those are your revision targets.