Saltar a contenido

Cascada

Cuando hablamos de la Cascada CSS nos referimos al algoritmo (conjunto de reglas y normas) que tiene el navegador para aplicar estilos CSS a un elemento HTML. No es tan sencillo como la mayoría cree, ya que hay múltiples casos (¡muchísimos!) donde pueden existir ambigüedades, y el navegador debe resolverlas para saber que estilo debe aplicar primero y cuál después.

Imagina que tenemos enlazados dos archivos .css mediante una etiqueta <link> y en cada uno tenemos un mismo selector .text aplicando colores diferentes. ¿Cuál de los dos se aplicará finalmente? Quizás pienses que el último que haya sido definido. A veces, esto es cierto, pero muchas otras veces no.

!important

Un detalle muy conocido de CSS es la posibilidad de añadir el texto !important al final del valor de una línea CSS, forzando al navegador a darle prioridad al estilo sobre otros. 

.text {
  color: red!important;
}

.text {
  color: blue;
}

Observa que, a pesar de tener definido un color blue posteriormente, el texto !important le da prioridad al anterior, dibujando el color de texto en rojo, en lugar de azul. En el caso de tener varias reglas con !important, prevalecería la que además se encuentre en último lugar.

¡Ojo!

Desgraciadamente, esta es una de las características más conocidas de CSS debido a que es una forma «cómoda» de forzar una regla CSS. Su uso no tiene porque ser una mala práctica, pero el abuso y uso indiscriminado si lo es y usar !important debería evitarse si es posible.

Especificidad CSS

La especificidad es una de las partes más importantes de la Cascada de CSS, ya que es el resultado del algoritmo del navegador para saber que estilos debe renderizar y cuales no.

A muy grandes rasgos, cuando nosotros utilizamos un selector CSS muy específico, este tiene preferencia sobre un selector CSS menos específico:

.page .container .element {
  background: grey;
}

.element {
  background: red;
}

En este sencillo ejemplo, ambos selectores terminan en .element, por lo tanto se le va a dar estilo al mismo elemento. Sin embargo, entran en conflicto porque es la misma propiedad background la que van a modificar. La forma de resolver esto por parte del navegador es detectar que selector es más específico, y en nuestro caso, el primero es mucho más específico.

Sin embargo, no es una buena práctica hacer selectores muy específicos, y la forma en que lo calcula el navegador puede no llegar a ser intuitiva.

Uso de ids

Aunque en los selectores las ids están permitidas (se pone # en el selector que hace referencia a ella), no es una buena recomendación. Las ids deberían dejarse para los elementos que modifican el DOM1.

Orden de aparición

Por último, una parte que si suele ser intuitiva es el orden de aparición. Hay múltiples formas de añadir CSS a un documento HTML, por lo que cada una de ellas tiene mayor o menor prioridad:

  1. Atributo style en una etiqueta HTML. Mayor prioridad.
  2. Bloque de estilos <style> en el documento HTML.
  3. Archivo .css externo referenciado mediante <link rel="stylesheet">. Menor prioridad.

Selectores

Como su mismo nombre indica, un selector CSS es una referencia a uno o varios elementos HTML, escrito generalmente desde código CSS (también pueden utilizarse desde ciertos lugares en Javascript). Es una forma rápida y cómoda de hacer referencia a elementos individuales o grupos de elementos, para posteriormente darles estilo.

Cuando estamos en una fase de aprendizaje muy inicial con CSS, es habitual dar estilo con selectores muy sencillos, donde generalmente utilizamos un selector genérico que representa una etiqueta HTML (por ejemplo div). Sin embargo, con el tiempo aprendemos a utilizar selectores más complejos que nos permitirán hacer más cosas y escribir menos.

Selector Descripción
div Seleccionamos por etiqueta. Aplicamos estilos a todas las etiquetas que coincidan.
#page Seleccionamos por ID. Aplicamos estilos al elemento que tenga ese id. Debería ser un único elemento.
.primary Seleccionamos por clase. Aplicamos estilos a los elementos que tengan dicha class. Pueden existir varias.
button.primary Mixto. Seleccionamos por múltiples criterios. En este caso, por elemento y por clase.

Actividades

  • AC 306 (RA1 / CE1b / IC1/ 3p) Definir en la hoja de estilo estas dos clases:
.subrayado {
  color:#00aa00;
  text-decoration:underline;
}
.tachado {
  color:#00aa00;
  text-decoration:line-through;
}

Luego, en la página html, definir un título con nivel h1 (subrayar todo el título). Seguidamente un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar el elemento span para asignar estilos a una palabra)

  • AR 307 (RA1 / CE1b / IC1/ 3p) Definir estas dos reglas en la hoja de estilo externa. Luego crear una página HTML que contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en un párrafo distinto. Asignar los estilos .pregunta y .respueta
.pregunta {
  font-family:verdana;
  font-size:14px;
  font-style:italic;
  color:#0000aa;
}
.respuesta {
  font-family:verdana;
  font-size:12px;
  font-style:normal;
  text-align:justify;
  color:#555555;
}

  • AC 308 (RA1 / CE1b / IC1/ 3p) Definir tres estilos de tipo id (cabecera, cuerpo y pie), luego definir en el archivo HTML tres areas inicializando el atributo id con los nombres de reglas de estilo creados.

  • PR 309 (RA1 / CE1b / IC1/ 5p) A partir de la página web que se te proporciona, debes emplear el atributo style para crear una página web que tenga el mismo aspecto que la siguiente imagen:

PR 309

Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
/* Todos los elementos de la pagina */
{
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Todos los parrafos de la pagina */
{
  color: #555;
}

/* Todos los párrafos contenidos en #primero */
{
  color: #369;
}

/* Todos los enlaces la pagina */
{
  color: #C30;
}

/* Los elementos <em> contenidos en #primero */
{
  color: #0000BB;
  background-color: #FFFFCC;
}

/* Todos los elementos <em> con la clase "especial" en toda la pagina */
{
  color: #FFFF00;
  background: #000000;
}

/* Todos los elementos <span> contenidos en la clase "normal" */
{
  font-weight: bold;
}
</style>
</head>

<body>

<div id="primero">
<p>
<a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-practico.html">HTML &amp; CSS: Curso práctico avanzado</a>
</p>

<p>
Aunque los inicios de <a href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a <em>páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo</em>.
</p>
</div>

<div id="segundo" class="normal">
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el <em class="especial">Lenguaje de marcas de hipertexto</em> (<span>Hypertext Markup Language</span>, <a href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>

<p>
Este libro es <em>adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web</em>. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>
</div>

</body>
</html>
Reescribe el HTML para que sea semántico.

  1. El DOM (Document Object Model) es como se conoce a la estructura de un documento HTML. ↩