Grosor de fuente

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 20 de 76.

En CSS, la propiedad font-weight se utiliza para controlar el grosor o la intensidad del texto dentro de un elemento HTML.

Los valores numéricos comunes para font-weight incluyen:

100: Delgada
200: Extra ligera
300: Ligera

400: Normal
500: Medio
600: Seminegrita

700: Negrita
800: Extra negrita
900: Negro

Los valores de palabras clave comunes para font-weight incluyen:

normal: Equivalente a 400
bold: Equivalente a 700

lighter: Especifica un peso más ligero que el elemento padre
bolder: Especifica un peso más grueso que el elemento padre

Por ejemplo:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar la propiedad font-weight para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el font-weight en 900.
Escribe una regla CSS que apunte al elemento <p>. Establece el font-weight en lighter.
Escribe una regla CSS que apunte al elemento <div>. Establece el font-weight en 600.

Hoja de referencia

La propiedad font-weight controla el grosor o la intensidad del texto.

Valores numéricos:

100: Delgado
200: Extra ligero
300: Ligero
400: Normal
500: Medio
600: Seminegrita
700: Negrita
800: Extra negrita
900: Negro

Valores de palabras clave:

normal: Equivalente a 400
bold: Equivalente a 700
lighter: Peso más ligero que el elemento padre
bolder: Peso más grueso que el elemento padre

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Pruébalo tú mismo

<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>