Peso da Fonte

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

No CSS, a propriedade font-weight é usada para controlar o peso ou a espessura do texto dentro de um elemento HTML.

Valores numéricos comuns para font-weight incluem:

100: Fino
200: Extra Leve
300: Leve

400: Normal
500: Médio
600: Seminegrito

700: Negrito
800: Extra Negrito
900: Preto

Valores de palavras-chave comuns para font-weight incluem:

normal: Equivalente a 400
bold: Equivalente a 700

lighter: Especifica um peso mais leve que o elemento pai
bolder: Especifica um peso mais negrito que o elemento pai

Por exemplo:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

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-weight para estilizar esses elementos. Siga os passos abaixo:

Escreva uma regra CSS que selecione o elemento <h1>. Defina o font-weight como 900.
Escreva uma regra CSS que selecione o elemento <p>. Defina o font-weight como lighter.
Escreva uma regra CSS que selecione o elemento <div>. Defina o font-weight como 600.

Folha de consulta

A propriedade font-weight controla o peso ou a espessura do texto.

Valores numéricos:

100: Fino (Thin)
200: Extra Leve (Extra Light)
300: Leve (Light)
400: Normal
500: Médio (Medium)
600: Seminegrito (Semi Bold)
700: Negrito (Bold)
800: Extra Negrito (Extra Bold)
900: Preto (Black)

Valores de palavra-chave:

normal: Equivalente a 400
bold: Equivalente a 700
lighter: Peso mais leve que o elemento pai
bolder: Peso mais negrito que o elemento pai

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Experimente você mesmo

<html>
<head>
    <title>Font Weight</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>