Para aplicar estilos de forma eficaz, é necessário compreender os seletores CSS, que determinam quais elementos HTML serão estilizados. Vamos explorar os principais tipos de seletores.

Seletor de Tag

Um seletor de tag seleciona todos os elementos de uma determinada tag, aplicando um estilo consistente em toda a página.

Sintaxe: No HTML, temos um elemento p:

<p>It was all in my head.</p>

Para aplicar estilos no arquivo CSS, utilize o nome da tag (p) como seletor:

p {
  property: value;
}

Vamos executar o exemplo a seguir e verificar como funciona.

Seletor de Classe

Seletores de classe direcionam elementos que compartilham um nome de classe, proporcionando controle mais preciso.

Sintaxe: No HTML, adicione um atributo class com um nome de classe significativo:

<p class="text">This song is another hit.</p>

No CSS, referencie o nome da classe com um ponto (.) para definir os estilos:

.text {
  property: value;
}

Execute o exemplo a seguir e observe que apenas os elementos com a classe text receberão esses estilos, permitindo um controle mais detalhado sobre a estilização.

Todos os elementos com o atributo class="text" são estilizados com texto vermelho, tamanho de fonte de 24px e fundo na cor trigo. O nome da classe text é definido em index.css utilizando o prefixo ..

Composição de Classes

É possível atribuir várias classes a um único elemento para obter uma estilização flexível.

Sintaxe: No HTML, adicione vários nomes de classe a um elemento:

<p class="text font">A robot created chemicals.</p>

No CSS, defina os estilos para cada classe separadamente:

.text {
  property: value;
}

.font {
  property: value;
}

Execute o exemplo a seguir para observar o funcionamento. Elementos com as classes text e font receberão os estilos especificados.

O elemento <p> com as classes text e font recebe estilos de ambos os seletores. A classe text define a cor como navy, e a classe font define o tamanho da fonte como 24px.

Seletor de Id

Seletores de Id direcionam um único elemento exclusivo. Como os Ids devem ser únicos, esse método é raramente utilizado para estilização.

Sintaxe: No HTML, adicione um atributo id a um elemento:

<p id="title">Choose from different themes.</p>

No CSS, referencie o id com uma hashtag (#) para definir os estilos:

#title {
  property: value;
}

Execute o exemplo a seguir e observe como funciona. Este exemplo aplica estilos ao elemento exclusivo com o id title.

O atributo id="title" identifica de forma exclusiva o elemento <p>, e os estilos definidos com o seletor #title aplicam-se apenas a esse elemento específico.