CSS curriculum

CSS practice

Short exercises. Try them first, open the hint if you are stuck, and the solution last.

Exercise 1
Style a button
Make the button blue with white text, rounded corners and 12px 20px padding.
Your solutionHTML / CSS
Editable code<style> button { /* your styles */ } </style> <button>Click me</button>
Ctrl+Enter to run
Exercise 2
Centre a box
Centre the box both horizontally and vertically inside the 300px tall container using flexbox.
Your solutionHTML / CSS
Editable code<style> .container { height: 300px; background: #e2e8f0; } .box { width: 80px; height: 80px; background: tomato; } </style> <div class="container"> <div class="box"></div> </div>
Ctrl+Enter to run
Exercise 3
Card spacing
Give .card 16px padding, a 2px solid border, and a 24px margin so two cards are separated.
Your solutionHTML / CSS
Editable code<style> .card { background: #f1f5f9; } </style> <div class="card">One</div> <div class="card">Two</div>
Ctrl+Enter to run