Concepto de cascada en CSS

Concepto de cascada en CSS

Print Friendly, PDF & Email
Concepto de cascada en CSS
Valora esta entrada
La cascada es el mecanismo que controla el resultado final de como visualizaremos una etiqueta html cuando a esta se le apliquen distintas instrucciones CSS.

¿Te has fijado alguna vez que el navegador tiene estilos CSS que se aplican por defecto?

Por ejemplo si no indicamos lo contrario visualizamos una tipografía concreta, los textos son negros, los h1,h2,h3… h6 tienen un tamaño relativo distinto y están en negrita, … y podríamos ir leyendo la hoja de estilos por defecto del navegador.

Todo esto son declaraciones CSS descriptivas que “aparecen de la nada“.

¿Como es posible que si ahora indicamos que un texto ya no es negro la página web pasa a verse distinta?

¿A quién debe obedecer el compilador web?

Todo esto es posible gracias al concepto de cascada. Un mismo elemento puede estar sujeto a varias hojas de estilos CSS y existen unas normas que indican de forma inequívoca cual de todas las instrucciones es la que debe afectar a un determinado elemento html.

Resumen de contenidos de esta publicación

Existen 3 reglas básicos que en conjunto conforman el conjunto de normas de cascada que permiten determinar para cada elemento que declaración CSS tiene prioridad.

Importancia

Existen 3 categorías de hojas de estilos que pueden afectar a una etiqueta html:

  1. Las instrucciones declaradas de forma nativa en la hoja CSS del navegador.
  2. Las instrucciones declaradas en el navegador del usuario web. (Por ejemplo una persona con problemas de visión puede forzar que los textos tengan un tamaño de fuente a una escala mayor)
  3. Las instrucciones declaradas por el autor de la página web.

¿Aplicando el sentido común que instrucciones deberían tener prioridad?

Hoja de estilos (navegador, usuario o autor de la web)

Prioridad

Navegador
1
Navegador con instrucción !important
2
Usuario
3
Autor
4
Autor con instrucción !important
5
Usuario con instrucción !important
6

Una forma fácil de recordar es pensar que quién tiene menos prioridad es el propio navegador y que quién tiene más prioridad es el usuario.

La página queda en una posición media.

!important

!important debe usarse con moderación.

Es más… es mejor que no lo uses. Suele denotar un maquetador mediocre. O como mínimo, úsalo únicamente si no tienes más remedio.

Cuando el navegador lee !important otorga la máxima prioridad independientemente de otros estilos. Yo lo uso cuando quiero personalizar algún estilo en wordpress y no me queda más remedio porqué no soy quién a escrito la plantilla web.

Debes considerar también que un !important de orden superior tiene prioridad a uno de orden inferior.

Y que dados dos !important de igual orden tiene prioridad el último.

La tabla anterior te puede ayudar.

Especificidad

La especifidad es el conjunto de reglas que indican el peso de un selector CSS.

Para que sea fácil de entender imaginemos que cada tipo de selector tiene una puntuación.

El selector que suma más puntos es el que gana y el que por tanto terminaremos visualizando en la página web.

Lo mejor es ver un ejemplo.

selectores css especificidad
Ejemplo de selectores redundantes
código html ejemplo especificidad CSS
HTML ejemplo especificidad. ¿Con cuantos selectores diferentes podemos llamar una etiqueta html?

En las imágenes se observa el código html y el css de nuestro ejemplo.

Fijémonos que por ejemplo la segunda etiqueta li de nuestra lista no ordenada podría ser a priori lila, azul, amarillo, o verde.

¿Como sabe el navegador de que color debe pintar?

En primer lugar rastrea el documento en búsqueda de todas las instrucciones CSS que afectan una por una a todas y cada una de las etiquetas html del documento.

A continuación sigue una heurística que consiste en otorgar una puntuación a todos los posibles selectores que afectan a cada etiqueta html.

El selector que obtiene mayor peso es el que termina mandando.

Ejemplo de tabla de cálculo de especificidad CSS
Ejemplo tabla calculo especificidad

Imaginemos que queremos dotar de estilos CSS a los elementos li del código html del ejemplo.

Podríamos llamar a los elementos li, de muchas formas. Tengamos en cuenta los que aparecen en la tabla. Uno por fila.

Si tenemos en cuenta las siguientes puntuaciones

  • A: 1 si existe style (en línea)
  • B: Número de IDs
  • C: Número de clases y pseudoclases
  • D: Número de elementos y pseudoelementos

La tabla se rellenaría según la imagen.

Si tenemos en cuenta que la columna A > B > C > D

El resultado final coincide exactamente con el obtenido si guardamos el documento HTML y lo abrimos con un navegador.

documento html ejemplo especificidad vista navegador
Resultado final ejemplo especificidad (vista navegador)

Orden de aparición

A igualdad de especificidad entre selectores manda el último.

El motivo es que sobrescribe al anterior.

Y hasta aquí el concepto de cascada.

Una norma muy útil que nos ayuda a entender porqué vemos una web como la web cuando distintas instrucciones CSS colisionan.

Y no menos importante, un concepto que nos ayuda a entender aquello de “hojas de estilo en cascada“.

Nos leemos mañana, como siempre, con un nuevo contenido en el web.

Entradas relacionadas:

Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 45
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 21
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Pseudo Clases :link, :active, :hover y :visited
- 34
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 129
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 217
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de centrado vertical y horizontal con CSS
- 52
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.