Tamanho da Fonte

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 19 de 76.

Em CSS, a propriedade font-size é usada para controlar o tamanho do texto dentro de um elemento HTML.

Aqui estão algumas unidades comuns usadas para especificar tamanhos de fonte:

Pixels (px): Uma unidade absoluta que especifica o tamanho da fonte em pixels. Esta é a unidade mais direta e comumente usada para definir tamanhos de fonte.

Ems (em): Uma unidade relativa baseada no tamanho da fonte do elemento pai. Por exemplo, se o elemento pai tiver um tamanho de fonte de 16px, então 1em será igual a 16px, 2em será igual a 32px e assim por diante.

Rems (rem): Uma unidade relativa baseada no tamanho da fonte do elemento raiz (<html>). Essa unidade proporciona mais consistência em todo o documento, pois não é afetada pelo tamanho da fonte dos elementos pai.

Porcentagens (%): Uma unidade relativa baseada no tamanho da fonte do elemento pai, semelhante a em. Por exemplo, se o elemento pai tiver um tamanho de fonte de 16px, então 100% será igual a 16px, 150% será igual a 24px e assim por diante.

Por exemplo:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Neste exemplo, o tamanho da fonte de todos os elementos <p> (parágrafos) é definido como 16px, todos os títulos <h1> são definidos como 2.5em (que será relativo ao tamanho da fonte do elemento pai), o tamanho da fonte base do documento é definido como 1.4rem, e todos os elementos com a classe small-text têm um tamanho de fonte de 80% (que será relativo ao tamanho da fonte do elemento pai).

Desafio

Fácil

Você recebeu um documento HTML com um cabeçalho (<h1>), um parágrafo (<p>) e uma divisão (<div>). Sua tarefa é usar a propriedade font-size para estilizar esses elementos. Siga as etapas abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina o font-size como 32px.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina o font-size como 1.2em.
Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina o font-size como 120%.

Experimente você mesmo

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>