Introdução às unidades em no CSS

As unidades em permitem definir o tamanho da fonte em porcentagem do tamanho do elemento pai. Vamos ver um exemplo.

Suponha que temos as seguintes tags aninhadas:

html<div>
  <p>
    texto
  </p>
</div>

Vamos definir o tamanho da fonte para nossa div:

cssdiv {
  font-size: 20px;
}

E para o parágrafo, vamos definir o tamanho como 2em. Este valor corresponde a uma fonte duas vezes maior que o tamanho da fonte do elemento pai:

cssp {
  font-size: 2em; /* corresponde a 40px */
}

Agora, vamos definir o tamanho do parágrafo como 0.5em. Este valor corresponde à metade do tamanho da fonte do elemento pai:

cssp {
  font-size: 0.5em; /* corresponde a 10px */
}

O valor 1em tornará a fonte do parágrafo igual à da div pai:

cssp {
  font-size: 1em; /* corresponde a 20px */
}

Tarefas Práticas

Suponha que temos o código HTML para o qual resolveremos as tarefas:

html<ul>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ul>

cssul {
  font-size: 10px;
}
li {
  font-size: 2em;
}

cssul {
  font-size: 20px;
}
li {
  font-size: 1.5em;
}

cssul {
  font-size: 30px;
}
li {
  font-size: 0.5em;
}