Tamanho da Fonte

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 19 de 76.

No 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 que é baseada no tamanho da fonte do elemento pai. Por exemplo, se o elemento pai tem um tamanho de fonte de 16px, então 1em é igual a 16px, 2em é igual a 32px, e assim por diante.

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

Porcentagens (%): Uma unidade relativa que se baseia 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% é igual a 16px, 150% é 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ágrafo) é definido como 16px, todos os títulos <h1> são definidos como 2.5em (que será relativo ao tamanho da fonte do seu 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 seu elemento pai).

Desafio

Fácil

Você recebeu um documento HTML com um título (<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 selecione o elemento <h1>. Defina o font-size como 32px.
Escreva uma regra CSS que selecione o elemento <p>. Defina o font-size como 1.2em.
Escreva uma regra CSS que selecione o elemento <div>. Defina o font-size como 120%.

Folha de consulta

A propriedade font-size controla o tamanho do texto dentro de um elemento HTML.

Unidades comuns para tamanhos de fonte:

Pixels (px): Unidade absoluta que especifica o tamanho da fonte em pixels
Ems (em): Unidade relativa baseada no tamanho da fonte do elemento pai
Rems (rem): Unidade relativa baseada no tamanho da fonte do elemento raiz
Porcentagens (%): Unidade relativa baseada no tamanho da fonte do elemento pai

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

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>