CSS Exercises for Beginners with Solutions

Ten short tasks, in order of difficulty. Try each one before opening the solution. There is no automatic checker, so compare your result with the description of what you should see. Many tasks have more than one correct solution.

Start with this page in the editor:

index.html

HTML

<h1>Juniper Books</h1>
<p class="lead">A small bookshop with a big reading list.</p>
<ul class="shelf">
  <li>Fiction</li>
  <li>Poetry</li>
  <li class="sale">Travel (on sale)</li>
</ul>
<a class="cta" href="#">Browse the shop</a>

Add your CSS inside a <style> block at the top and press Run.

1. Color the heading

Make the h1 dark orange (#d94a00).

Show a possible solution

style.css

CSS

h1 { color: #d94a00; }

2. Style one paragraph only

Make the paragraph with the class lead bigger (1.25rem) and grey (#5c5750).

Show a possible solution

style.css

CSS

.lead { font-size: 1.25rem; color: #5c5750; }

3. Remove the bullets

Remove the bullets from the list and the extra space on its left.

Show a possible solution

style.css

CSS

.shelf { list-style: none; padding-left: 0; }

4. Highlight the sale item

Give the item with the class sale a pale yellow background and bold text.

Show a possible solution

style.css

CSS

.sale { background: #fff3cd; font-weight: bold; }

5. Give the items some space

Add 8px of padding and a thin light-grey bottom border to every list item.

Show a possible solution

style.css

CSS

.shelf li { padding: 8px; border-bottom: 1px solid #ddd; }

6. Make the link a button

Turn the .cta link into a button: orange background, white text, 10px 22px padding, rounded corners and no underline.

Show a possible solution

style.css

CSS

.cta { display: inline-block; background: #d94a00; color: #fff; padding: 10px 22px; border-radius: 6px; text-decoration: none; }

7. Add a hover effect

Make the button a darker orange on hover, with a smooth 0.2s change.

Show a possible solution

style.css

CSS

1
2

.cta { transition: background-color .2s; }
.cta:hover { background: #b84624; }

8. Center the content

Limit the page to 30rem wide and center it horizontally with margin.

Show a possible solution

style.css

CSS

body { max-width: 30rem; margin: 0 auto; padding: 0 1rem; }

9. Style the first item differently

Make only the first list item larger, without adding a class.

Show a possible solution

style.css

CSS

.shelf li:first-child { font-size: 1.2em; }

10. Use a variable

Put the orange in a variable called --brand and use it for the heading and the button.

Show a possible solution

style.css

1
2
3

:root { --brand: #d94a00; }
h1 { color: var(--brand); }
.cta { background: var(--brand); }

When you can do these without the solutions, move on to Layout Challenges.