Para que te puedas familiarizar con el comportamiento de CSS, es importante comprender una serie de conceptos clave.

structura y herencia.

Un documento HTML tiene una estructura determinada que es equivalente a un árbol genealógico cuando se hace referencia a la relación entre elementos:

• Se dice que un elemento es "hijo" de otro si está contenido directamente en él y este último pasa a ser su "padre". Por ejemplo: el elemento p es hijo del elemento body y elelemento body es padre del elemento p.
• Los elementos que tienen el mismo padre son "hermanos". Por ejemplo: un elemento p puede ser hermano de otro elemento p si ambos son hijos directos del elemento body.

Controlar la relación padre-hijo es fundamental para el funcionamiento de CSS. Un hijo puede "heredar" valores de propiedad de su padre. Con una buena planificación, la herencia puede emplearse para hacer más eficiente la especificación de los estilos.

Este principio por el que algunas reglas se ignoran y otras se heredan nos introducen un concepto muy importante: "la cascada".

Reglas de estilo en conflicto: la "cascada".

La "cascada", de las hojas de estilo en cascada, se refiere a lo que ocurre si varias fuentes de información de estilo quieren dar formato al mismo elemento de una página. Cuando un navegador encuentra un elemento para el cual hay varias declaraciones de estilo, las ordena de acuerdo al origen de la hoja de estilo, la especificidad de los selectores y el orden de la regla para poder determinar cuál aplicar.

Origen de la hoja de estilo.

Los navegadores otorgan un peso distinto a las hojas de estilo que, ordenadas de menor a mayor peso, son:

• Hojas de estilo del navegador.
• Hojas de estilo del lector.
• Hojas de estilo de la persona que ha diseñado la página web.
• Declaraciones de estilo !important del lector.

Además de este orden, existe otra jerarquía de pesos que se aplican a las hojas de estilo creadas por la persona que ha diseñado la página web. Es importante entender esta jerarquía y tener en cuenta que las reglas de estilo que están al final de la lista ignorarán a las primeras. La siguiente lista, que como la anterior está ordenada de menor a mayor peso, muestra esta otra jerarquía:

• Hojas de estilo externas vinculadas (empleando el elemento link en la cabecera del documento).
• Hojas de estilo externas importadas (empleando el elemento @import dentro del elemento style en la cabecera del documento).
• Hojas de estilo incrustadas (empleando el elemento style en la cabecera del documento).
• Estilos en línea (empleando el atributo style en la etiqueta del elemento).
• Declaraciones de estilo marcadas como !important.

Especificidad del selector.

Hasta ahora se tuvieron en cuenta las distintas fuentes de la información del estilo. Pero aún puede existir algún conflicto a nivel de reglas. Por esa razón, "la cascada" continúa a nivel de reglas. Lo verás mejor con el el siguiente ejemplo, que podría estar en una hoja de estilo externa o incrustada. En él se muestran dos reglas que hacen referencia al elemento strong.

Ejemplo:

strong {color: red;} h1 strong {color: blue;}

En el ejemplo anterior, todo el texto del documento (X)HTML marcado con la etiqueta strong aparecerá en color rojo. Sin embargo, si el texto marcado con la etiqueta strong aparece dentro de una cabecera de primer nivel (h1), su color será azul. Esto ocurre porque un elemento en un contexto determinado es más específico que en un contexto general y, por lo tanto, tiene más peso. Debes tener en claro que, cuanto más específico sea el selector se le dará más peso para ignorar las declaraciones en conflicto.

Orden de las reglas.

Cuando una hoja de estilo contiene varias reglas en conflicto de igual peso, sólo se tendrá en cuenta la que está en último lugar. En el siguiente ejemplo, todas las cabeceras de primer nivel del documento serían rojas porque se impone siempre la última regla:

Ejemplo:

h1 {color: green;} h1 {color: blue;} h1 {color: red;}

Tipos de elementos CSS. Elementos de bloque y en línea.

En CSS, la noción de "elemento de bloque" y "en línea" es puramente de presentación. Un elemento de bloque de CSS siempre genera saltos de línea, antes y después de él, mientras que los elementos en línea de CSS no lo hacen, aparecen en el flujo de la línea y sólo pasarán a otra línea si no tienen espacio.

En (X)HTML, los párrafos (p), cabeceras (como h1), listas (ol, ul, dl) y contenedores (div) son los elementos de bloque más comunes, mientras que, el texto enfatizado (em), las anclas (a) y los elementos span son los elementos en línea más comunes.

Con CSS podrás indicarle al navegador cómo quieres que se vea en el documento empleando para ello los atributos block e inline de la propiedad display, independientemente de que un elemento sea de bloque o en línea.