Você pode facilmente aplicar um estilo a todos os elementos de um determinado tipo em uma página HTML5, mas às vezes você pode querer ter um controle mais rígido de seus estilos. Por exemplo, você pode querer ter mais do que um estilo de parágrafo. Como um exemplo, olhar para a página classes.html.

Mais uma vez, vários formatos está nesta página:

• Perguntas têm uma grande sans serif itálico. Há mais do que uma pergunta.

• As respostas são menores, azul e em uma fonte cursiva. Há mais de uma resposta, também.

  

Perguntas e respostas são todos os parágrafos, para que você não pode simplesmente o estilo do parágrafo porque você precisa de dois estilos distintos. Há mais de uma pergunta e mais de uma resposta, então o truque ID seria problemático. Dois elementos diferentes não podem ter o mesmo ID. Isto é onde a noção de aulas entra em jogo. Cada ID pertence a um único elemento, mas muitos elementos podem compartilhar a mesma classe.

Como adicionar classes para a página

CSS permite definir classes em seu HTML e fazer definições de estilo que são aplicadas através de uma classe. Funciona assim:

1. Adicione o classe atribuem às suas perguntas HTML.

   Ao contrário de ID, vários elementos podem compartilhar a mesma classe. Definir a classe para questão indica estes parágrafos será denominado como perguntas:

    
   Que tipo de vaca vive no Ártico?

2. Adicionar atributos de classe semelhantes para as respostas, definindo a classe das respostas a responda:

    
   Um Eskimoo!

   Agora você tem duas subclasses diferentes de parágrafo: questão e responda.

3. Criar um estilo de classe para as perguntas.

   O estilo da classe é definida em CSS. Especificar uma classe com o período (.) Antes do nome da classe. As classes são definidas em CSS assim:

   Nesta situação, o questão classe é definida como uma grande fonte sem serifa alinhados à esquerda.

4. Definir a aparência das respostas.

   A classe usa um direito; fonte cursiva justificada.

 .resposta {font: 120% "Comic Sans MS", cursive-text-align: right; color: # 00F-}

usando classes

Aqui está o código para a página, mostrando como usar classes CSS:

piadas favoritas
Que tipo de vaca vive no Ártico?
Um Eskimoo!
O que se passa em cima de uma casa de cachorro?
O Woof!

Às vezes você vê seletores, como

p.fancy

que incluem tanto um elemento e um nome de classe. Este estilo é aplicado apenas para parágrafos com a classe anexado. Geralmente, as turmas são grandes, porque eles podem ser aplicados a todos os tipos de coisas, então você pode deixar o nome do elemento para fora para fazer o estilo como reutilizável possível.

combinando aulas

Um elemento pode usar mais de uma classe.

Os parágrafos parecem estar em três estilos diferentes, mas apenas vermelho e roteiro são definidos. O terceiro parágrafo usa ambas as classes. Aqui está o código:

várias Classes
Este parágrafo usa a classe vermelho
Este parágrafo usa a classe roteiro
Este parágrafo usa ambas as classes

A folha de estilo apresenta duas classes. o vermelho classe faz com que o ponto vermelho (bem, texto branco com um fundo vermelho), ea escrita classe aplica um tipo de letra cursiva ao elemento.

Os dois primeiros parágrafos, cada um tem uma classe, e as classes agem como seria de esperar. A parte interessante é o terceiro parágrafo porque ele tem duas classes.

Ambos os estilos será aplicada ao elemento de na ordem em que foram escritos. Note-se que ambos os nomes de classe ocorrem citações dentro e sem vírgulas são necessárias (ou permitido). Você pode aplicar mais de duas classes para um elemento, se desejar. Se as classes têm regras conflitantes (digamos um faz o elemento verde e o próximo torna azul), a última classe na lista irá substituir os valores anteriores.

Um elemento também pode ter um ID. O estilo de ID, o estilo elemento, e todos os estilos de classe são tidos em conta quando o navegador tenta exibir o objeto.

Normalmente, é melhor para nomear as classes com base no seu significado (como mainBackgroundColor). Você pode decidir que o verde é melhor do que vermelho, assim que você quer ter de mudar o nome da classe ou você tem que ter um vermelho classe que coloriu o verde das coisas. Isso seria estranho.