HTML class

HTML class

O  atributo  class no HTML é usado para especificar uma classe para um elemento HTML.

Vários elementos HTML podem compartilhar a mesma classe.

Utilizando o atributo class no html

O atributo class é usado para apontar para um nome de classe em uma folha de estilo. 

Ele também pode ser usado por um JavaScript para acessar e manipular elementos com o nome de classe específico.

Segui os exemplos a abaixo como trabalhar com class.

1. Veja como Destacar uma palavra usando apenas uma class.

.azul-claro { color:#1acabc; font-weight: bold; }

<p>Veja o exemplo: como <span class="azul-claro">Destacar</span> uma palavra usando apenas uma class. </p>

2. Veja como Destacar a cor do texto em um paragrafo usando apenas uma class.

.cor-azul     { color:#3875ff; }
.cor-vermelho { color:#ff3838; }
.cor-verde    { color:#8bd577; }

 <p class="cor-azul">Veja o exemplo texto na class com a cor <b>Azul</b>. </p> 
 <p class="cor-vermelho">Veja o exemplo texto na class com a cor <b>Vermelho</b>. </p> 
 <p class="cor-verde">Veja o exemplo texto na class com a cor <b>Verde</b>. </p> 

3. Veja como Destacar o paragrafo usando apenas uma class para dar um margim bottom.

.m-b-5  { margin-bottom:5px; }
.m-b-30 { margin-bottom:30px; }
.m-b-40 { margin-bottom:40px; }

<p class="cor-azul m-b-5">Veja o exemplo texto na class com uma margem bottom 5px. </p> 
<p class="cor-vermelho m-b-30">Veja o exemplo texto na class com uma margem bottom 30px. </p> 
<p class="cor-verde m-b-40">Veja o exemplo texto na class com com uma margem bottom 40px. </p> 

4. Veja como Mudar a cor do fundo de uma DIV usando apenas uma class.

.background-azul  { background-color:#3875ff; padding:10px; }
.texto-branco     { color:#ffffff; }

.background-preto { background-color:#151515; padding:10px;}
.texto-vermelho   { color:#d50b0b; }

<div class="background-preto texto-vermelho m-b-20">

   Veja o fundo dessa DIV com a cor <b>PRETO</b> e o texto Vermelho.

</div>
                                
<div class="background-azul texto-branco">

    Veja  o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco.

</div>

5. Veja como Centralizar o TEXTO apenas adicionando uma class.

.centraliza-txt   { text-align:center; }

<div class="background-azul texto-branco m-b-20 centraliza-txt">

   Veja o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco Centralizado.

</div>

O atributo class pode ser usado em qualquer elemento HTML.

Classes Múltiplas

Os elementos HTML podem pertencer a mais de uma classe ou podemos usar separadas.

Para definir várias classes, separe os nomes das classes com um espaço, por exemplo.

Repare que temos as class:

.background-azul: Cor do fundo azul

.texto-branco: Cor do texto branco

.m-b-20: Margim bottom de 20px

.centraliza-txt: Centraliza o texto

<div class="background-azul texto-branco m-b-20 centraliza-txt">

   Veja o fundo dessa DIV com a cor <b>AZUL</b> e o Texto Branco Centralizado.

</div>

Usando class com os nomes certinhos e bem organizado você pode reutilizar e economizar tempo.

ou seja crie um style CSS padrão para você reutilizar nos seus projetos.

Veja o Resultado!

Baixar Código Veja Funcionando