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

Seletor de Tag

Uma forma de aplicar estilos é utilizando a própria tag do elemento. Os estilos especificados com um seletor de tag afetarão todos os elementos com essa tag. Isso é útil para aplicar uma estilização consistente aos elementos em todo o site.

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

Uma forma mais precisa de estilizar elementos é utilizando seletores de classe. Esses seletores direcionam elementos com nomes de classe específicos, permitindo aplicar estilos de maneira seletiva.

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, proporcionando maior controle 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

Também é possível combinar várias classes em um único elemento, tornando a composição de classes uma ferramenta poderosa para aplicar estilos – separe os nomes das classes com espaços no atributo class.

Sintaxe: No HTML, adicione vários nomes de classes 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;
}

Vamos executar o exemplo a seguir e observar como funciona. 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

Embora seja possível utilizar o seletor id para estilização, geralmente não é recomendado. Os ids devem ser únicos em uma página, o que limita sua reutilizaçã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 único com o id title.

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