Fundamentos do CSS

Classes e ids

Além de chamar cada elemento HTML pela tag, o CSS também pode alterar as propriedades a partir das classes (class) e pela identidade (id) atribuídos dentro das tags.

Ao longo de uma ou múltiplas páginas é possível associar diversos elementos a uma mesma classe. Entretanto, recomenda-se que um id jamais seja repetido para outros elementos na mesma página.

No exemplo abaixo teremos dois parágrafos com ids diferentes e a mesma classe no código HTML. O primeiro parágrafo ficaria assim:

<p id="primeiro" class="destaque">Este é o texto do <strong>primeiro</strong> parágrafo com um id (primeiro) que atribui a cor de fundo amarela e classe (destaque) que atribui a cor de texto marrom.</p>

O segundo parágrafo ficaria assim:

<p id="segundo" class="destaque">Este é o texto do <strong>segundo</strong> parágrafo com um id (segundo) que atribui a cor de fundo laranja e classe (destaque) que atribui a cor de texto marrom.</p>

Agora que cada parágrafo possui o próprio id e uma class comum, podemos fazer alterações pelo CSS. Primeiramente vamos alterar as a cor de fundo para cada id. Para isso usamos o sinal hashtag (#) que indica um id.

#primeiro{
   background-color: yellow;
   }
#segundo{
   background-color: orange;
   }

Em seguida, vamos alterar a cor da fonte em ambos os parágrafos por meio da classe. Para isso utilizamos o sinal ponto (.) para identificar uma classe.

.destaque{
  color: brown;
  }

Com isso o resultado seria o seguinte:

Este é o texto do primeiro parágrafo com um id (primeiro) que atribui a cor de fundo amarela e classe (destaque) que atribui a cor de texto marrom.

Este é o texto do segundo parágrafo com um id (segundo) que atribui a cor de fundo laranja e classe (destaque) que atribui a cor de texto marrom.

Pseudo-classes

Existem algumas características que podem ser acessadas pelo CSS chamadas pseudo-classes. Em termos de funcionamento, são parecidas com as classes, mas usam o sinal dois pontos(:) que identifica as pseudo-classes.

Como exemplo, é possível alterar o comportamento de um link quando passamos o mouse por sima dele, por meio da pseudo-classe :hover

No exemplo a seguir vamos fazer com que o link ganhe um fundo amarelo quando o mouse pousar sobre ele.


			a:hover {background-color: yellow;}

O resultado ficaria assim

Aqui temos um parágrafo com um link. Passe o mouse sobre ele para trocar o fundo.

A seguir uma lista de algumas pseudo-classes do CSS:

:hover seleciona elementos com mouse over
:active seleciona os links ativos
:link seleciona os links não visitados
:visited seleciona os links visitados
:empty seleciona os parágrafos <p> que estão vazios.
:first-child seleciona todos os primeiros filhos (dentro) do elemento escolhido
:last-child seleciona todos os últimos filhos (dentro) do elemento escolhido
:first-of-type seleciona a primeira ocorrência do elemento
:last-of-type seleciona a última ocorrência do elemento

Veja também

Voltar ao topo