📘 Aula 18 MD-2: Usando o id com CSS 📘

Introdução

O id é um identificador único para elementos HTML. Diferente de class, um id deve aparecer **apenas uma vez** por página.

No CSS, usamos o símbolo # para selecionar um elemento pelo seu id e aplicar estilos específicos.

1. No HTML, exemplo adicionamos um id ao elemento: <p id="meu-paragrafo">Texto</p>.
2. No CSS, usamos #meu-paragrafo { } para aplicar estilos.

<p id="texto1">Este é um texto estilizado pelo id.</p>

#texto1 {
    color: #2a9d8f;
    font-size: 18px;
}

<div id="caixa">Caixa com id</div>

#caixa {
    background-color: #e76f51;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

<h2 id="titulo">Título Centralizado</h2>

#titulo {
    text-align: center;
    color: #264653;
}

<div id="quadro">Quadro estilizado</div>

#quadro {
    width: 200px;
    border: 2px solid #f4a261;
    padding: 8px;
}

Um id deve ser único na página.
Use id para estilos ou manipulações específicas que não se repetem.
Prefira class quando precisar repetir estilos em vários elementos.
Evite conflitos com o CSS global e use !important em casos específicos, se necessário.
Combinar id com JavaScript é útil para manipulação única de elementos.