Home » Exercises » CSS Exercises » CSS Basics

CSS Basics

Write CSS to change the text colour and background of a paragraph

Description: Create a paragraph with white text on a dark blue background, with some padding.

Hint:

  • Use color for the text and background-color for the background.
  • Add padding so the text does not touch the edges.

CSS for text colour and background

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: darkblue;
      padding: 12px;
    }
  </style>
</head>
<body>
  <p>White text on a dark blue background.</p>
</body>
</html>

Output in the browser:

Output in the browser

White text on a dark blue background.

How it works

  • The selector p applies the rule to every paragraph.
  • color changes the text colour, and background-color changes the area behind it.

Read CSS Colors.

Write CSS to style a heading (centre, uppercase, letter spacing)

Description: Style an h1 heading so that it is centred, in capital letters, with extra space between the letters and a line below it.

Hint:

  • Use text-align, text-transform, letter-spacing and border-bottom.

CSS to style a heading

<style>
  h1 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-bottom: 3px solid #0073aa;
    padding-bottom: 8px;
  }
</style>

<h1>Welcome to my site</h1>

Output in the browser:

Output in the browser

Welcome to my site

How it works

  • text-transform: uppercase shows the text in capitals, though it is written in small letters in HTML.
  • letter-spacing adds space between the letters.

Read CSS Text.

Write CSS to make an image responsive and round

Description: Make one image that shrinks on small screens, and another image shown as a 100px circle without stretching.

Hint:

  • Use max-width: 100%; height: auto; for the first image.
  • Use border-radius: 50% and object-fit: cover for the avatar.

CSS responsive and round image

<style>
  .photo { max-width: 100%; height: auto; }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>

<img class="photo" src="mountain.jpg" alt="Mountain">
<img class="avatar" src="mountain.jpg" alt="Profile picture">

Output in the browser:

Output in the browser

How it works

  • max-width: 100% lets the image become smaller than its real size, but never bigger than its box.
  • object-fit: cover crops the picture to fill the circle, so it does not look squeezed.

Read CSS Images.

Write CSS to create a pulsing animation

Description: Create a circle that grows and shrinks again and again.

Hint:

  • Define the steps with @keyframes.
  • Attach it with animation: name duration timing infinite.

CSS pulsing animation

<style>
  @keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
  }
  .dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e91e63;
    animation: pulse 1.2s ease-in-out infinite;
  }
</style>

<div class="dot"></div>

Output in the browser:

Output in the browser

How it works

  • The result is a pink circle. On your page it grows to 1.3 times its size at 50% of the time and then returns to normal. This does not move in this box.
  • infinite repeats the animation forever.
  • transform is smooth and cheap for the browser to animate.

Read CSS Transitions and Animations.