Tamaño de fuente

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 19 de 76.

En CSS, la propiedad font-size se utiliza para controlar el tamaño del texto dentro de un elemento HTML.

Estas son algunas unidades comunes que se utilizan para especificar tamaños de fuente:

Píxeles (px): Una unidad absoluta que especifica el tamaño de la fuente en píxeles. Esta es la unidad más sencilla y utilizada habitualmente para establecer tamaños de fuente.

Ems (em): Una unidad relativa que se basa en el tamaño de fuente del elemento principal. Por ejemplo, si el elemento principal tiene un tamaño de fuente de 16px, entonces 1em equivale a 16px, 2em equivale a 32px, y así sucesivamente.

Rems (rem): Una unidad relativa que se basa en el tamaño de fuente del elemento raíz (<html>). Esta unidad proporciona una mayor coherencia en todo el documento, ya que no se ve afectada por el tamaño de fuente de los elementos principales.

Porcentajes (%): Una unidad relativa que se basa en el tamaño de fuente del elemento padre, de forma similar a em. Por ejemplo, si el elemento padre tiene un tamaño de fuente de 16px, entonces 100% equivale a 16px, 150% equivale a 24px, y así sucesivamente.

Por ejemplo:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

En este ejemplo, el tamaño de fuente de todos los elementos <p> (párrafo) se establece en 16px, todos los encabezados <h1> se establecen en 2.5em (que será relativo al tamaño de fuente de su elemento principal), el tamaño de fuente base del documento se establece en 1.4rem y todos los elementos con la clase small-text tienen un tamaño de fuente de 80% (que será relativo al tamaño de fuente de su elemento principal).

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-size para aplicar estilos a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <h1>. Establece font-size en 32px.
Escribe una regla CSS que seleccione el elemento <p>. Establece font-size en 1.2em.
Escribe una regla CSS que seleccione el elemento <div>. Establece font-size en 120%.

Pruébalo tú mismo

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