Home » Exercises » CSS Exercises » CSS Top Exercises

CSS Top Exercises

Write CSS to create a box with border, padding and rounded corners

Description: Create a box that has a 2px green border, 20px padding, 10px rounded corners and a light green background.

Hint:

  • Use border, padding, border-radius and background-color.

CSS for a box with rounded corners

<style>
  .box {
    width: 300px;
    padding: 20px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: #e8f5e9;
  }
</style>

<div class="box">This is a box with rounded corners.</div>

Output in the browser:

Output in the browser
This is a box with rounded corners.

How it works

  • padding adds space inside the border.
  • border-radius rounds the corners.

Read CSS Borders and CSS Box Model.

Write CSS to centre a div horizontally and vertically using Flexbox

Description: Centre a small box in the middle of a 200px high container.

Hint:

  • Make the parent a flex container.
  • Use justify-content: center and align-items: center.

CSS to centre a div with Flexbox

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: #eceff1;
  }
  .child {
    padding: 12px 20px;
    background: #7e57c2;
    color: white;
  }
</style>

<div class="parent">
  <div class="child">Centred</div>
</div>

Output in the browser:

Output in the browser
Centred

How it works

  • justify-content works on the main axis (horizontal by default) and align-items on the cross axis (vertical).
  • The parent needs a height, otherwise there is no free space to centre in.

Read CSS Flexbox.

Write CSS to create a horizontal navigation menu

Description: Create a dark horizontal menu with the links Home, About, Services and Contact, and a different background when the mouse is over a link.

Hint:

  • Remove bullets with list-style: none.
  • Use display: flex on the ul.
  • Style the a tags with padding, and add an a:hover rule.

CSS horizontal navigation menu

<style>
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: #333;
  }
  .menu a {
    display: block;
    padding: 12px 18px;
    color: white;
    text-decoration: none;
  }
  .menu a:hover {
    background: #0073aa;
  }
</style>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Output in the browser:

Output in the browser

How it works

  • A menu is a list of links. display: flex on the ul puts the items in one row.
  • display: block with padding on the links makes the whole box clickable, not only the text.
  • On your page, the background of a link turns blue when you hover over it (the hover colour does not show in this box).

Read CSS Lists and CSS Links.

Write CSS to create a responsive card grid using CSS Grid

Description: Create a grid of four cards that fits as many columns as the screen allows, and stacks on a phone.

Hint:

  • Use display: grid with grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)).

CSS responsive card grid

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
  }
</style>

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Output in the browser:

Output in the browser
Card 1
Card 2
Card 3
Card 4

How it works

  • minmax(150px, 1fr) says each column is at least 150px wide, and can grow to share the free space.
  • auto-fit makes as many columns as fit. On a narrow phone the cards come in one column.

Read CSS Grid.

Write CSS to style a login form

Description: Style a login form with a username, a password and a Log in button, inside a bordered box of 300px.

Hint:

  • Use width: 100% and box-sizing: border-box on the inputs.
  • Use input:focus to show an outline when the field is selected.

CSS login form

<style>
  .login { width: 300px; padding: 20px; border: 1px solid #ccc; border-radius: 6px; }
  .login input {
    width: 100%;
    padding: 8px;
    margin: 4px 0 12px;
    box-sizing: border-box;
    border: 1px solid #aaa;
    border-radius: 4px;
  }
  .login input:focus { outline: 2px solid #0073aa; }
  .login button {
    width: 100%;
    padding: 10px;
    background: #0073aa;
    color: white;
    border: 0;
    border-radius: 4px;
  }
</style>

<form class="login">
  <label>Username</label>
  <input type="text">
  <label>Password</label>
  <input type="password">
  <button type="submit">Log in</button>
</form>

Output in the browser:

Output in the browser

How it works

  • box-sizing: border-box makes width: 100% include the padding and border, so the inputs do not stick out of the box.
  • input:focus styles the field that has the cursor. Do not remove the focus outline without giving another one.

Related: HTML Forms and HTML login form template.