Classes HTML

Classificar o HTML (definir classes) para que possamos definir estilos CSS para as classes dos elementos.

Definir estilos idênticos para a mesma classe ou diferentes estilos para classes diferentes.

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Londres</h2>
<p>
Londres é a capital da Inglaterra. 
É a cidade mais populosa do Reino Unido, 
com uma área metropolitana de mais de 13 milhões de habitantes.
</p>
</div> 
</body>
</html>

Experimente em Primeira Mão

Classe de elementos bloco

O elemento <div> do HTML éElementos blocoEle pode ser usado como contêiner para outros elementos HTML.

Definir a classe do elemento <div> para que possamos definir a mesma classe para elementos <div> idênticos:

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>Londres</h2>
<p>Londres é a capital da Inglaterra. 
É a cidade mais populosa do Reino Unido, 
com uma área metropolitana de mais de 13 milhões de habitantes.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris é a capital e a cidade mais populosa da França.</p>
</div>
<div class="cities">
<h2>Tóquio</h2>
<p>Tóquio é a capital do Japão, o centro da Grande Área de Tóquio,</p>
e a área metropolitana mais populosa do mundo.</p>
</div>
</body>
</html>

Experimente em Primeira Mão

Elementos em Linha Classificados

O elemento <span> do HTML é um elemento em linha, que pode ser usado como contêiner de texto.

Definir a classe de um elemento <span>, permite aplicar o mesmo estilo a elementos <span> idênticos.

Exemplo

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {cor:red;}
</style>
</head>
<body>
<h1>Meu <span class="red">Importante</span> Título</h1>
</body>
</html>

Experimente em Primeira Mão