Classes de elementos em CSS

Nas lições anteriores, selecionamos elementos da página pelo nome da tag, aplicando estilos, por exemplo, a todos os parágrafos ao mesmo tempo. Em uma página, no entanto, podem haver parágrafos de tipos diferentes, aos quais é necessário aplicar estilos diferentes. Para resolver esse problema, podemos atribuir diferentes parágrafos a diferentes classes CSS.

Para atribuir uma tag a uma classe, é necessário escrever o atributo class nessa tag, e nele - o nome da classe que você inventou, composto por letras, números, sublinhados e hífens.

Vamos ver um exemplo. Vamos criar parágrafos com dois tipos de classes - eee e zzz:

html<p class="eee">
  parágrafo com a classe eee
</p>
<p class="eee">
  parágrafo com a classe eee
</p>
<p class="zzz">
  parágrafo com a classe zzz
</p>
<p class="zzz">
  parágrafo com a classe zzz
</p>

Agora, vamos selecionar no CSS os parágrafos com as diferentes classes e aplicar alguns estilos a eles. Por exemplo, vamos colorir os parágrafos com a classe zzz em vermelho, e os parágrafos com a classe eee em verde.

Para isso, precisamos selecionar no arquivo CSS nossas classes. A seleção tem a seguinte sintaxe: primeiro vem o ponto, e depois o nome da classe que inventamos. Ou seja, para selecionar a classe eee precisamos escrever .eee, e para a classe zzz - escrever .zzz.

Então, vamos fazer o descrito. Vamos adicionar ao nosso HTML também os estilos CSS para as classes criadas por nós:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Se executarmos nosso código, o resultado será o seguinte:

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Título</h2>
<p class="eee">
  parágrafo
</p>
<p class="eee">
  parágrafo
</p>
<p>
  parágrafo sem classe
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>