Decoración de texto

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

En CSS, la propiedad text-decoration se utiliza para añadir o eliminar decoraciones al texto dentro de un elemento HTML. Esta propiedad le permite subrayar, poner una línea superior o tachar el texto, proporcionando énfasis visual o indicando estados específicos.

Los valores comunes para text-decoration incluyen:

none: Elimina cualquier decoración de texto. Este es el valor predeterminado.

underline: Agrega un subrayado al texto.

overline: Añade una línea superior sobre el texto.

line-through: Añade una línea a través del medio del texto (tachado).

Por ejemplo:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Desafío

Fácil

Se te proporciona un documento HTML con un párrafo (<p>) que contiene un elemento de anclaje (<a>), y una división (<div>). Tu tarea es utilizar la propiedad text-decoration para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que afecte a todos los elementos <a>. Establece el text-decoration a none para eliminar el subrayado predeterminado.
Añade un atributo class con el valor "underline" al elemento <p>.
Escribe una regla CSS que afecte a todos los elementos con la clase underline. Establece el text-decoration a underline.
Añade un atributo class con el valor "strike" al elemento <div>.
Escribe una regla CSS que afecte a todos los elementos con la clase strike. Establece el text-decoration a line-through.

Hoja de referencia

La propiedad text-decoration añade o elimina decoraciones al texto dentro de los elementos HTML.

Valores comunes:

none: Elimina cualquier decoración de texto (por defecto)
underline: Añade un subrayado al texto
overline: Añade una línea superior sobre el texto
line-through: Añade una línea de tachado

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Pruébalo tú mismo

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>