Qué son las Clases en Css

Cuando necesitamos cambiar los estilos a varias etiquetas html o específicas (por ejempo queremos agregar un cambio de color para los H1 y para los párrafos) utilizamos las clases.

Las clases se agregan dentro de la etiqueta de apertura y nosotros le designamos un nombre cualquiera, en este caso si es para un H1 se agregaría:

<h1 class="nombre_de_la_clase">Este es un título</h1>

En nuestro archivo Css externo creariamos esta clase de la siguiente manera:

.nombre_de_la_clase { 
 color: red;
}

Es importante considerar el “punto” y luego el nombre de la clase inventada, dentro de las llaves se establecerían los estilos correspondientes, en este ejemplo estamos cambiando el color a “rojo”.

Como te podrás imaginar ahora a cualquier etiqueta que agreguemos la misma clase, tendrá el color rojo.

Código del video Html:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Incluir los Css</title>
	<link rel="stylesheet" href="estilos.css" type="text/css">

</head>
<body>
	<p class="rojo">Este párrafo será de color Rojo</p>
	<p class="azul grande">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et cupiditate fuga dolores. Dolores, fugiat a, aut ex beatae alias minima aspernatur at illo dignissimos obcaecati debitis cumque est, aperiam quod.</p>
</body>
</html>

Código del video Css:

.rojo{
	color:red;
}
.azul{
	color:blue;
	font-size: 100px;
}