Entendiendo los términos Herencia y Cascada en CSS

Autor: Antonio García

El principal objetivo de las hojas de estilo en cascada (CSS) es separar la estructura propia de la página web y su estilo. El uso de las hojas de estilo en cascada otorga un mejor control sobre los elementos que conforman la página, una de las principales ventajas del uso de CSS se mencionan a continuación:

  • Controlar el aspecto de la página: Es posible especificar muchas características como espacios entre líneas, márgenes, posicionamiento de elementos dentro de la página, etc.

  • Aplicar cambios globales: Es posible aplicar la misma hoja de estilos a todas las secciones de una página web en lugar de estar indicando los estilos a usar para cada sección

  • Controlar la apariencia en los navegadores: Es posible proveer a los navegadores mayor información a cerca de la forma en la que se quiere que ciertos elementos o la página completa sea visualizada

En resumen, con el uso de CSS es posible especificar y definir de una manera más clara y precisa muchas de las siguientes características:

  • Tipo de fuente, tamaño, color y efectos
  • Color de fondo e imágenes
  • Controlar muchos aspectos de capas de texto, como espacios y alineación
  • Seleccionar márgenes y bordes
  • Controlar el orden de aparición de los elementos en la página, así como la posición en la que se desea que aparezcan
  • Definir el tamaño de los elementos presentes en la página web
  • Controlar características de listas y tablas
  • Muchas cosas mas. . .

Heredando Estilos

Un concepto básico en HTML son las "etiquetas anidadas", por ejemplo:

  • Cualquier fragmento de código HTML válido se anida entre las etiquetas <html> y </html>
  • Los elementos que el navegador despliega en la pantalla se anida entre las etiquetas <body> y </body>

La especificación CSS reconoce que regularmente se anidan elementos dentro de otros, y se asegura de que el estilo asociado con el elemento padre se asocie también al elemento hijo. Este mecanismo es llamado herencia.

Cuando se define un estilo para algún elemento, el mismo estilo se aplica para todos los elementos anidados dentro de él. Por ejemplo, definiremos un estilo para el body que especifica el color de fondo, color del texto, tamaño de la fuente, tipo de letra y márgenes:



Al definir esta regla de estilo para el body, todos los elementos que se encuentren anidado en él, heredarán dicho estilo:



Y se visualizaría lo siguiente:




Diferentes formas de implementar Estilos.

Existen varias formas de definir un estilo para alguna página web:


  • Hoja de estilos interna


    • Es posible definir un estilo mediante el elemento <style> dentro de la sección del head en una página. Ejemplo:

      Dentro de esta hoja de estilos interna se pueden especificar la cantidad de reglas que se deseen. El beneficio que se logra con esto es que se tienen a la mano tanto las reglas de estilo como los elementos a los que se les aplican, pudiendo de esta manera modificarlas o reacomodarlas más fácilmente.


    • Se puede usar el atributo style para agregar información directamente a la etiqueta a la cual se desea que afecte, esto es llamado estilo inline:

      El uso de estilos inline no es una práctica recomendada, ya que da lugar a una mayor confusión cuando las reglas de estilo son demasiadas en una página web, además de que las etiquetas pueden quedar demasiado extensas cuando una regla de estilos sea larga, otra vez pudiendo dar lugar a confusiones Es por eso que es recomendable usar ya sea hojas de estilo internas o externas en lugar de estilos inline


  • Hoja de estilos externa

    Mediante esta opción, las reglas de estilo se definen en un documento separado el cual puede ser referenciado dentro de nuestra página web. Una de las principales ventajas que trae esta práctica es que si varias páginas o secciones utilizan los mismos estilos, simplemente se puede referenciar la misma hoja de estilos cuantas veces sean necesarios en las secciones que se desee. Las modificaciones afectarían a todas las páginas que estén referenciando esa hoja de estilos

    • Es posible referenciar una hoja de estilos mediante la etiqueta <link>, la cual relacionará nuestra página web con la hoja de estilos especificada:

    • También es posible utilizar la expresión @import para importar una hoja de estilos externa a nuestra página web:

      Este enunciado debe ser usado dentro de l elemento style en el encabezado de la página. Si se tienen varias referencias a hojas de estilos usando la expresión @import, algunas reglas de estilos podrían sobre escribirse y las que se definan al último son las que quedan definidas para ser aplicadas.



Entendiendo el término "Cascada"

Varias hojas de estilos pueden afectar a una página web y crear una regla sobre la otra. Es algo parecido a la herencia de estilos. Esto es la parte de la "cascada" dentro de las CSS.

Para entender esto de mejor manera, pongamos un ejemplo:

Tenemos una página web para el departamento de inglés de una Universidad. El departamento de ingles es parte de la Escuela de Humanidades, la cual es una escuela dentro de la Universidad. Cada una de estas entidades (la Universidad, la Escuela y el Departamento de Inglés) tiene su propia hoja de estilos.

  • La hoja de estilos de la Universidad proveen las reglas de estilo para todas las páginas en el sitio.
  • La hoja de estilos de la Escuela hace referencia a la hojas de estilos de la Universidad (usando una expresión @import) y agrega más reglas de estilo específicas para la apariencia de la página de la Escuela.
  • La hoja de estilos del Departamento de Ingles hace referencia a la hoja de estilos de la Escuela y también define reglas propias para su página. Es decir, el Departamento de Inglés tiene sus propias reglas de estilo y hereda las reglas de estilo de la Escuela y de la Universidad.

Aunque lo que se ha descrito anteriormente trae muchas ventajas, también puede traer ciertas confusiones: ¿Qué pasa si múltiples hojas de estilo definen reglas para el mismo elemento? En este caso, la regla que se mantiene es la que se encuentre más cercana al elemento en cuestión. Retomando el ejemplo anterior:

  • Si alguna regla para h1 existe en la hoja de estilos del Departamento de Inglés, ésta toma precedencia sobre las reglas de estilo para h1 presentes en las hojas de estilo de la Escuela y la Universidad.
  • Si se aplica alguna regla de estilo dentro de la misma etiqueta (una regla inline), ésta toma precedencia sobre las demás.

Si quieres saber como crear una página web desde cero visita. Como crear una página web completamnete desde cero en html y css

Si te gusta este artículo por favor ayudanos, presiona el boton Google+1 (Google mas 1)
Políticas de privacidad | Términos y condiciones | Recomendación de hosting | Para webmasters | Como se hace..Cursos y tutoriales | Diseño web por ciudades | Osio
Copyright © 2012 | Todos los derechos reservados | Diseñado por mastersitios.com