Usando a class Attribute
O HTML class atributo torna possível definir estilos iguais para elementos com o mesmo nome da classe.
Aqui temos três <div> elementos que aponta para o mesmo nome da classe:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html> Tente você mesmo " Londres
Londres é a capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
De pé sobre o rio Tamisa, Londres tem sido um grande povoado por dois milênios, a sua história que remonta à sua fundação pelos romanos, que o nomeou Londinium.
Paris
Paris é a capital e cidade mais populosa da França.
Situado no rio Sena, que está no coração da região de Ile-de-France, também conhecido como o parisienne região.
Dentro de sua área metropolitana é um dos maiores centros populacionais da Europa, com mais de 12 milhões de habitantes.
Tóquio
Tóquio é a capital do Japão, o centro da área maior de Tokyo, ea área metropolitana mais populosa do mundo.
É o assento do governo japonês eo palácio imperial, ea casa da família imperial japonesa.
A Prefeitura de Tóquio faz parte do mundo mais populosa área metropolitana com 38 milhões de pessoas e maior economia urbana do mundo.
Usando a class Atributo em elementos inline
O atributo de classe HTML também pode ser usado para elementos inline:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »