Decoração de Texto

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

No CSS, a propriedade text-decoration é usada para adicionar ou remover decorações ao texto dentro de um elemento HTML. Esta propriedade permite sublinhar, sobrelinhar ou tachar o texto, fornecendo ênfase visual ou indicando estados específicos.

Valores comuns para text-decoration incluem:

none: Remove qualquer decoração de texto. Este é o valor padrão.

underline: Adiciona um sublinhado ao texto.

overline: Adiciona uma linha sobre o texto.

line-through: Adiciona uma linha no meio do texto (tachado).

Por exemplo:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Desafio

Fácil

Você recebeu um documento HTML com um parágrafo (<p>) que contém um elemento de âncora (<a>) e uma divisão (<div>). Sua tarefa é usar a propriedade text-decoration para estilizar esses elementos. Siga os passos abaixo:

Escreva uma regra CSS que selecione todos os elementos <a>. Defina o text-decoration como none para remover o sublinhado padrão.
Adicione um atributo class com o valor "underline" ao elemento <p>.
Escreva uma regra CSS que selecione todos os elementos com a classe underline. Defina o text-decoration como underline.
Adicione um atributo class com o valor "strike" ao elemento <div>.
Escreva uma regra CSS que selecione todos os elementos com a classe strike. Defina o text-decoration como line-through.

Folha de consulta

A propriedade text-decoration adiciona ou remove decorações ao texto dentro de elementos HTML.

Valores comuns:

none: Remove qualquer decoração de texto (padrão)
underline: Adiciona um sublinhado ao texto
overline: Adiciona uma linha acima do texto
line-through: Adiciona uma linha de tachado

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Experimente você mesmo

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