Selectores CSS y clases

En esta lección aprenderás a aplicar estilos solo a los elementos que tú elijas, en lugar de a todos los de un tipo, usando clases.

Una clase es un nombre que le pones a un elemento con class="nombre". En el CSS lo apuntas escribiendo un punto delante: .nombre { ... }. Como el mismo nombre de clase se puede repetir en cuantos elementos quieras, es la forma habitual de decir «este estilo, a estos elementos concretos». La etiqueta <span> sirve para envolver un trozo de texto dentro de una línea sin romper el párrafo.

El código de ejemplo define la clase .highlight y la aplica de dos maneras: a una palabra suelta dentro de un párrafo (con <span>) y al párrafo entero. Fíjate en que la misma regla produce dos resultados visualmente distintos según a qué elemento se la pegues.

El error clásico es olvidar el punto en el CSS: highlight { ... } busca una etiqueta llamada «highlight», que no existe, así que no pasa nada. También conviene no poner el punto en el HTML: allí se escribe class="highlight", sin punto.

En el desarrollo real prácticamente todo el diseño se construye con clases. Existen incluso convenciones de nomenclatura como BEM precisamente porque, en un proyecto grande, poner buenos nombres de clase es lo que mantiene el CSS manejable.