Web design worksheet

Claus O. Wilke

2025-04-21

Exercise instructions

For each of the following exercises, try to reproduce the output shown in the box using the indicated HTML tags and CSS properties.

After each exercise slide the solutions are shown on the next slide, so don’t jump ahead.

Do the exercises on JSFiddle: https://jsfiddle.net/

Exercise 1

The quick brown fox jumps over the lazy dog.

HTML tags used: <span>

CSS properties used:

color: brown;
font-style: italic;

Solution to Exercise 1

HTML input:

The quick <span class = "brown">brown</span> fox
jumps over the <span class = "italics">lazy
dog<span>.

CSS input:

.brown {
  color: brown;
}

.italics {
  font-style: italic;
}

Exercise 2

The quick brown fox

jumps over the lazy dog.

HTML tags used: <div>

CSS properties used:

background-color: AliceBlue;
margin: 1em 0;

Solution to Exercise 2

HTML input:

<div>The quick brown fox</div>
<div>jumps over the lazy dog.</div>

CSS input:

div {
  background-color: AliceBlue;
  margin: 1em 0;
}

Exercise 3

The quick brown fox jumps over the lazy dog.

HTML tags used: <span>

CSS properties used:

background-color: AliceBlue;
padding: 0.5em;
margin: 0 0.5em;

Solution to Exercise 3

HTML input:

<span>The quick brown fox</span>
<span>jumps over the lazy dog.</span>

CSS input:

span {
  background-color: AliceBlue;
  padding: 0.5em;
  margin: 0 0.5em;
}

Exercise 4

Chapter 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML tags used: <div>

CSS properties used:

font-family: fantasy;
font-family: cursive;
font-size: 1.6em;
font-weight: bold;

Solution to Exercise 4

HTML input:

<div class = "heading">Chapter 1</div>

<div class = "body">Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</div>

CSS input:

.heading {
  font-family: fantasy;
  font-size: 1.6em;
  font-weight: bold;
}

.body {
  font-family: cursive;
}

Exercise 5

Chapter 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML tags used: <div>

CSS properties used:

font-size: 1.6em;
font-weight: bold;
text-align: center;
color: MidnightBlue;
background-color: AliceBlue;
padding: 0.5em;
margin-top: 1em;

Solution to Exercise 5

HTML input:

<div class = "heading">Chapter 1</div>

<div class = "body">Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</div>

CSS input:

div {
  color: MidnightBlue;
}

.heading {
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  background-color: AliceBlue;
  padding: 0.5em;
}

.body {
  margin-top: 1em;
}