I. CSS (hojas de estilo en cascada)

¿Por qué es importante entender todo esto para modificar la apariencia de nuestras páginas de EducaMadrid?

Porque en EducaMadrid hay un montón de CSS ya definidos, y si los que han definido su apariencia han decidido que el elemento con el identificador #nav tiene fondo azul, y yo lo quiero rojo, tengo que saber cómo escribir las reglas CSS para “pisar” su definición.

Esa es la clave para modificar la apariencia de los temas predefinidos de EducaMadrid: saber identificar qué elemento es el que quiero modificar (elegir el selector adecuado) y saber que tal vez haya reglas definidas para ese elemento con anterioridad, y que si quiero modificar su apariencia cuento con:

1. El orden en el que se hayan definido las reglas.
2. El nivel de especificidad (el peso) de cada regla.

Ejemplos:

EducaMadrid tiene una definición básica para el elemento #nav

.blue #nav{
    background:#0094DA;
} 

El elemento con el identificador nav de la gama de color azul (es la gama de color que usa EducaMadrid por defecto) tiene este color de fondo: #0094DA.

Si quiero cambiar el color de fondo de ese elemento, tengo que saber que si lo defino después, podré pisar su definición.

Es decir:

Tengo que saber que debo definir una regla de igual o mayor importancia que la suya y que si no es de mayor importancia, debo colocarla después.

Todas las definiciones CSS que nosotros introduzcamos desde el portal educativo EducaMadrid irán después de las propias definiciones del portal. De manera que solo tendré que definir una regla de igual importancia, y así podré "pisar" lo que EducaMadrid ha definido. Por ejemplo:

.blue #nav{
    background:yellow;
} 

El elemento con el identificador nav de la gama de color "blue" tendrá fondo amarillo.