Usando La class Atributo
El HTML class atributo permite definir estilos iguales para los elementos con el mismo nombre de la clase.
Aquí tenemos tres <div> elementos que apunta al mismo nombre de clase:
Ejemplo
<!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> Inténtalo tú mismo " Londres
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
Situada en el río Támesis, Londres ha sido un acuerdo importante por dos milenios, su historia se remonta a su fundación por los romanos, que la llamaron Londinium.
París
París es la capital y ciudad más poblada de Francia.
Situado en el río Sena, que está en el corazón de la región de Ile-de-France, también conocida como la región parisina.
Dentro de su área metropolitana es uno de los núcleos de población más grandes de Europa, con más de 12 millones de habitantes.
Tokio
Tokio es la capital de Japón, el centro de la mayor área de Tokio, y el área metropolitana más poblada del mundo.
Es el asiento del gobierno japonés y el palacio imperial, y el hogar de la familia imperial japonesa.
La prefectura de Tokio es parte del área metropolitana más poblada del mundo, con 38 millones de personas y la economía urbana más grande del mundo.
Uso de la class Attribute en Inline Elementos
El atributo de clase HTML también se puede utilizar para los elementos en línea:
Ejemplo
<!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> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »