La cascada de CSS

Las hojas de estilo en cascada se llaman así porque pueden usarse unas sobre otras para sumar reglas y aplicarlas todas a un mismo documento. Sin embargo, esto puede llevar a problemas de interpretación: Si hay dos hojas que proponen distintas reglas para un mismo selector ¿Cuál de ellas debe ser interpretada?

Herencia

Algunas de las características que asignemos en una hoja de estilo pueden heredarse de unos selectores a otros. La información al respecto de si una característica es heredable suele ser, generalmente, bastante intuitiva. De todos modos puede consultarse en la descripción de la propiedad. Las reglas que controlan esta herencia son muy simples: Todos los selectores que estén contenidos en otro selector heredan de este los valores que se hayan asignado a sus propiedades (si tienen esa propiedad), salvo si se especifica para ellos otro valor. Por ejemplo, la siguiente regla:

Asigna un borde fino a la página y color rojo al texto del elemento body. Al ser la propiedad color heredable, todos los elementos contenidos en BODY (por ejemplo párrafos) tendrán también color rojo, a menos que creemos otra regla para el elemento <P> especificando otro color. La propiedad border, sin embargo, no es heredable, de modo que, si queremos que los párrafos también tengan un borde alrededor, tendremos que crear una regla para ello.

También hay que tener en cuenta que las proiedades que tenga por defecto un elemento de HTML (como, por ejemplo, el que el contenido del elemento <TT>...</TT> use una fuente monotipo o de paso fijo) tienen preferencia sobre las propiedades heredadas.

Por otro lado, y aunque realmente no es un aspecto de herencia, todas las reglas que apliques a un selector se aplican también a todas las clases de ese mismo selector, a menos que se especifique otra cosa en esa clase. Por ejemplo:

todos los párrafos tendrán alineación a la derecha y color azul, escepto aquellos que tengan definido CLASS="rojo", que heredarán la alineación a la derecha, pero su color será rojo.

Prioridad

Veamos ahora como organiza CSS las prioridades entre hojas de estilo que pudieran entrar en conflictos. CSS estipula cinco niveles de prioridad, de tal modo que las reglas que se correspondan con un nivel superior se impondrán sobre aquellas que pertenezcan a uno inferior. Estos niveles de prioridad son, ordenados de menor a mayor, los siguientes:

• Si no se aplican propiedades a un selector, se usará el valor heredado. Si no hubiera un valor heredado, se usará el valor por defecto.
• Las declaraciones marcadas con !important prevalecen sobre aquellas que no estén marcadas.
• Todas las hojas de estilo prevalecen sobre los valores por defecto del navegador. Las hojas de estilo del diseñador prevalecen sobre las del navegante. Las reglas incrustadas se imponen sobre las hojas vinculadas que, a su vez, tienen mas peso que las externas.
• Los selectores de identificación ID se imponen ante los selectores de clase CLASS, que son mas importantes que los selectores contextuales los cuales, a su vez, se imponen sobre los selectores normales.
• Las reglas de una hoja que sean posteriores a otras con las que entren en conflicto prevalecerán sobre estas.

Quizás sea necesario aclarar un poco la segunda norma. Cuando construyas una regla de estilo que consideres importante, y no quieras que pueda ser anulada por otra regla u hoja de estilo, puedes marcarla con una sentencia !important del siguiente modo:

Esto hace que el color rojo de los párrafos se imponga sobre cualquier otro color para este mismo selector que se defina en cualquier otra regla u hoja de estilo.

Ralmente, estas reglas no son tan complicadas como parece. Leelas un par de veces y verás como son realmente lógicas y razonables. De todos modos, lo mejor es que experimentes por tí mismo y que procures no dejar nada al azar. Y recuerda que los navegadores no son excesivamente fieles a las normas de CSS.