Clases de elementos en CSS

En lecciones anteriores seleccionábamos elementos de la página por el nombre de la etiqueta, aplicando estilos, por ejemplo, simultáneamente a todos los párrafos. Sin embargo, en una página puede haber párrafos de diferentes tipos, a los que es necesario aplicar estilos diferentes. Para resolver este problema, podemos asignar diferentes párrafos a diferentes clases CSS.

Para asignar una etiqueta a una clase, es necesario escribir en esa etiqueta el atributo class, y en él - el nombre de la clase inventado por usted, compuesto por letras, números, guiones bajos y guiones.

Veamos un ejemplo. Creemos párrafos con dos tipos de clases - eee y zzz:

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

Ahora accedamos en CSS a los párrafos con las diferentes clases y asignémosles algunos estilos. Por ejemplo, coloreemos los párrafos con la clase zzz en color rojo, y los párrafos con la clase eee - en verde.

Para ello, en el archivo CSS debemos acceder a nuestras clases. La selección tiene la siguiente sintaxis: primero va el símbolo punto, y luego el nombre de clase inventado por nosotros. Es decir, para acceder a la clase eee debemos escribir .eee, y para la clase zzz - escribir .zzz.

Entonces, hagamos lo descrito. Añadamos a nuestro HTML también los estilos CSS para las clases introducidas por nosotros:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Si ejecutamos nuestro código, el resultado será el siguiente:

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>