Teoría
Teoría

Clases en CSS

Hemos vuelto a colorear el resumen, pero el precio fue alto. La solución de añadir etiquetas extra solo para dar estilo no es la mejor. Es mucho más cómodo usar «clases».

Una clase es simplemente uno de los atributos que puede tener una etiqueta HTML. Por ejemplo:

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

En CSS se pueden definir estilos solo para los elementos que tienen una clase concreta. Para eso se usa el selector por clase, que se escribe así: .nombre-de-clase. Por ejemplo:

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

Para asignar distintos colores a los párrafos, se les pueden añadir clases diferentes y luego usar selectores por clase.

El nombre de una clase puede contener letras latinas, números, el guion - y el guion bajo _. Además, debe empezar con una letra latina.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Clases en CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Resumen del curso</h1> Etiquetas dobles. Etiquetas individuales. Atributos de las etiquetas. Estilos en línea (integrados). Estilos externos. Estilos por clases. </body> </html>

CSS

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

ObjetivosRealizado

Ahora rehagamos todo usando clases:

Añadan la clase completed a los cuatro primeros párrafos.
Añadan la clase in-progress al quinto párrafo.
Añadan la clase new al sexto párrafo.