Decoração do Texto

Parte da seção Estilização com 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 do texto dentro de um elemento HTML. Essa propriedade permite sublinhar, aplicar uma linha acima ou riscar o texto, proporcionando ê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 acima do texto.

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

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 âncora (<a>) e uma divisão (<div>). Sua tarefa é usar a propriedade text-decoration para estilizar esses elementos. Siga as etapas abaixo:

Escreva uma regra CSS que selecione todos os elementos <a>. Defina 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 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 text-decoration como 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>