Clases HTML

Categorize HTML (set class) so that we can define CSS styles for the class of the element.

Set the same style for the same class, or set different styles for different classes.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
Es la ciudad más poblada del Reino Unido, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>

Prueba Personalmente

Categorized block-level elements

The HTML <div> element isBlock-level elementsIt can be used as a container for other HTML elements.

Setting the class of the <div> element so that we can set the same class for the same <div> elements:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
Es la ciudad más poblada del Reino Unido, 
con una área metropolitana de más de 13 millones de habitantes.</p>
</div>
<div class="cities">
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</div>
</body>
</html>

Prueba Personalmente

Elementos en Línea Categorizados

El elemento <span> de HTML es un elemento en línea, que se puede usar como contenedor de texto.

Establecer la clase de un elemento <span>, puede aplicar estilos iguales a los elementos <span> idénticos.

Ejemplo

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

Prueba Personalmente