•  
     

Mantendo a classe - HTML e CSS

Classes são úteis quando você tem um monte de elementos que devem receber todos o mesmo estilo. Ao invés de aplicar as mesmas regras a vários seletores, você pode simplesmente aplicar a mesma classe a todos os elementos HTML, e então definir o estilo para essa classe na aba CSS.

Classes são atribuídas a elementos HTML com a palavra class e um sinal de igual, assim:

Código: Selecionar todos

<div class="square"></div>
<img class="square"/>
<td class="square"></td>

Classes são identificadas em CSS com um ponto (.), assim:

Código: Selecionar todos

.square {
    height: 100px;
    width: 100px;
}

Isso permite que você selecione elementos de tipos diferentes e dê a eles o mesmo estilo.


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Meu site</title>
</head>
<body>
<div class="fancy">Teste</div>
<div class="fancy">Teste 2</div>
<div class="fancy">Teste 3</div>
</body>
</html>


CSS

Código: Selecionar todos

.fancy{
color:#0000CD;
font-family:cursive;
}


Demo: http://jsfiddle.net/u9cs66gg/