Teoría
Teoría

Clases en CSS

Bueno, hemos vuelto a colorear la sinopsis, pero a qué precio. La solución con etiquetas adicionales para estilizar no es la mejor. ¡Es mucho más conveniente utilizar "clases"!

Una clase es sólo uno de los atributos de las etiquetas HTML, por ejemplo:

<p class="important">...</p>
<p class="help">...</p>

En CSS, sólo se pueden establecer estilos para elementos con una clase específica. Para ello se utiliza un selector de clase, que se escribe como .nombre-clase, por ejemplo:

.important { color: red; } - selecciona todas las etiquetas con clase "important"
.help { color: green; }    - seleccionará todas las etiquetas con clase "help"

Para dar diferentes colores a los párrafos, puede añadirles diferentes clases y luego utilizar selectores de clase.

El nombre de la clase puede contener caracteres latinos, números, guión - y guión bajo _ y debe comenzar con un carácter latino.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Clases en CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Esquema del curso</h1> Etiquetas de emparejamiento. Etiquetas individuales. Atributos de la etiqueta. Estilos en línea (incorporados). Estilos exteriores. Estilización por clases. </body> </html>

CSS

body { font-family: "Tahoma", serif; } h1 { color: #999999; } .completed { color: green; } .in-progress { color: orange; } .new { color: red; }

ObjetivosRealizado

Rehacer todo con clases:

Añade una clase completed a los cuatro primeros párrafos.
Al quinto párrafo, añada una clase in-progress.
Añade una new clase al sexto párrafo.