<div class="box small">
  <p>small</p>
</div>
<div class="box medium">
  <p>Medium</p>
</div>
<div class="box large">
  <p>Large</p>
</div>
.box {
  width: 3em;
  height: 3em;
  padding: 2em;
}

.small {
  font-size: 14px;
  background-color: peachpuff;
}

.medium {
  font-size: 22px;
  background-color: paleturquoise;
}

.large {
  font-size: 32px;
  background-color: pink;
}

div {
  margin: 10px;
}

p {
  text-align: center;
}

html {
  font-family: arial;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.