Seletor de ID

Parte da seção Styling with 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 este 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 os passos 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 deste elemento como "yellow" e a cor do texto como "red".

Folha de consulta

O seletor de ID seleciona um elemento HTML específico usando seu atributo id. Os seletores de ID são únicos e só podem ser aplicados a um único elemento em uma página.

Use um símbolo de cerquilha (#) seguido pelo valor do ID:

#idname {
    property: value;
}

Exemplo:

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

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>