Estilos en cascada

El término en cascada indica la forma en que finalmente un navegador muestra los estilos para elementos concretos de una página Web. Los estilos que se ven en una página Web proceden de tres fuentes: la hoja de estilos creada por el autor de la página, las opciones de estilo personalizadas elegidas por el usuario (si las hay) y los estilos predeterminados del propio navegador.

El aspecto final de una página Web es el resultado de las reglas aplicadas por estas tres fuentes en conjunto (o “en cascada”) para representar la página Web de forma óptima.

Este concepto se ilustra bien con una etiqueta común: la etiqueta de párrafo, o etiqueta <p>. De manera
predeterminada, los navegadores se suministran con hojas de estilos que definen la fuente y el tamaño del texto del párrafo (es decir, el texto situado entre etiquetas <p> en el código HTML). En Internet Explorer, por ejemplo, todo el texto del cuerpo, incluido el texto de los párrafos, se muestra de manera predeterminada con la fuente Times New Roman, Mediana.
Sin embargo, como autor de una página, puede crear una hoja de estilos que anule el estilo predeterminado del navegador para la fuente de párrafo y el tamaño de fuente. Por ejemplo, puede crear la siguiente regla en su hoja de estilos:
p {
font-family: Arial;
font-size: small;
}
Cuando un usuario carga la página, la configuración de fuente de párrafo y de tamaño de fuente establecida por usted como autor de la página anula la configuración de texto de párrafo del navegador.

APLICACIÓN DE LA HERENCIA

La herencia es otro aspecto importante de los estilos en cascada. Las propiedades de la mayoría de los elementos de una página Web son heredadas: por ejemplo, las etiquetas de párrafo heredan determinadas propiedades de las etiquetas de cuerpo, las etiquetas de lista de viñetas heredan determinadas propiedades de las etiquetas de párrafo, etc.

Por consiguiente, si crea la siguiente regla en su hoja de estilos:

body {
font-family: Arial;
font-style: italic;
}
Todo el texto de los párrafos de la página Web (así como el texto que hereda propiedades de la etiqueta de párrafo) será Arial cursiva porque la etiqueta de párrafo hereda estas propiedades de la etiqueta de cuerpo. No obstante, puede hacer que sus reglas sean más específicas creando estilos que anulen la formula estándar de herencia. Por ejemplo, si crea las siguientes reglas en su hoja de estilos:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}

Todo el texto de cuerpo será Arial cursiva excepto el texto de los párrafos (y su texto heredado), que se mostrará como Courier normal (sin cursiva).