Em HTML, o atributo class é usado para especificar uma classe para um elemento HTML.
Vários elementos HTML podem partilhar a mesma classe.
O atributo class é frequentemente usado para apontar para um nome de classe numa folha de estilo. Também pode ser usado em JavaScript para aceder e manipular elementos com um nome de classe específico.
Para criar uma classe, deve escrever um ponto final (.), seguido por um nome de classe. Em seguida, definir as propriedades CSS dentro de chavetas {}
Exemplo:
.polo {
background-color: navy;
color: white;
padding: 10px;
}
Deveria ser: Um nome de classe pode ser usado por vários elementos HTML, enquanto um nome de id deve ser usado apenas por um elemento HTML dentro da página
Exemplo:
#topo {
background-color: lightblue;
color: darkblue;
padding: 40px;
text-align: center;
}
A principal vantagem de utilizar ID é fazer saltos dentro da mesma página, quando o documento HTML é muito longo: Salta para o início da aula de links
Exemplo:<a href="s3ot.html#topo">Salta para o início da aula de links </a>... embora o início não seja interessante...
Podemos ver neste exemplo em que no topo temos um ID e nos pólos temos CLASS.
Todos os pólos tem a mesma formatação (cor).
Todos os pólos tem a mesma formatação (cor).
Todos os pólos tem a mesma formatação (cor).
Neste parágrafo aplicamos uma classe para formatar apenas uma palavra de forma embutida.
Caracteristicas gerais para todos os elementos HTML:
* {
margin: 0px;
padding: 0px;
}
Formatar um elemento específico pertencente a uma classe específica. Exemplo: Os parágrafos de uma dada classe
p.corpo {
margin-bottom:30px;
margin-left: 20px;
}
Formatar múltiplos elementos:
h1,h2,h3 {
margin-bottom:20px;
}
Formatar elementos que estejam dentro outros elementos: Todos os parágrafos dentro de elementos <div>
div p {
margin-bottom:30px;
}