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 em 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, então 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. Este é o lugar 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 às responda:

    
   Um Eskimoo!

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

   Video: HTML5 and CSS3 beginners tutorial 21 - classes

3. Criar um estilo de classe para as perguntas.

   Video: css id vs class attributes, when to use id and when to use class, difference between id and class

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

   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 vai 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 é aplicada apenas a parágrafos com a classe anexado. Geralmente, as aulas 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 ser 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
   Video: 30 Days to Learn HTML & CSS (Full Course)
   

   A folha de estilo apresenta duas classes. o vermelho classe faz o parágrafo vermelho (bem, texto branco com um fundo vermelho), ea roteiro 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 tem duas classes.

   Ambos os estilos serão aplicados ao elemento na ordem em que são 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 eo 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 levados em conta quando o navegador tenta exibir o objeto.

   Normalmente, é melhor para nomear classes com base em 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.