Seletor de ID

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 13 de 76.

O seletor de ID é usado para selecionar um elemento HTML específico com base no valor do seu atributo id. Ao contrário dos seletores de classe, que podem ser usados para estilizar múltiplos elementos, os seletores de ID são únicos e só podem ser aplicados a um único elemento em uma página. Isso os torna úteis para estilizar elementos individuais com estilos específicos que não devem ser aplicados a nenhum outro elemento.

Para selecionar um elemento com um ID específico no seu CSS, você usa um símbolo de cerquilha (#) seguido pelo valor do ID. Aqui está a sintaxe básica para usar um seletor de ID:

#idname {
    property: value;
}

Por exemplo:

#intro {
    color: blue;
    font-size: 20px;
}

Neste exemplo, o seletor de ID #intro seleciona o elemento com o ID "intro". As declarações definem a cor do texto como azul e o tamanho da fonte como 20 pixels para esse elemento.

Desafio

Fácil

Você recebeu um documento HTML com vários elementos, incluindo um cabeçalho (<h1>), um parágrafo (<p>) e uma divisão (<div>). Sua tarefa é usar um seletor de ID para estilizar um elemento de divisão. Siga as etapas abaixo:

Adicione um atributo id com o valor "special" ao elemento <div>.
Escreva uma regra CSS usando um seletor de ID que tenha como alvo o elemento com o ID "special". Defina a cor de fundo desse elemento como amarelo e a cor do texto como vermelho.

Experimente você mesmo

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>