2.1 La interfaz como medio de comunicación

Puede resultar útil imaginar la interfaz como un traductor entre el usuario y el ordenador (o aplicación). El usuario expresa lo que desea hacer mediante acciones sencillas que el programa transforma en instrucciones que él mismo puede comprender y ejecutar, para después devolver información al usuario. Por tanto, la comunicación es bidireccional.

2.2 Características de una buena interfaz

Una buena interfaz debe permitir que el usuario consiga sus objetivos con el menor esfuerzo posible. Entre sus principales características destacan:

• Simplicidad: Una interfaz sencilla contiene únicamente los elementos necesarios. Sobrecargar la pantalla con botones, colores o información que no son necesarios para la acción a realizar suele provocar confusión.
• Claridad: Los elementos deben indicar claramente su función. El usuario no debería tener que adivinar qué hace cada elemento. Ejemplo:
  • “Guardar” es más claro que “Aceptar”.
  • Un icono de una papelera suele representar la acción de eliminar.
  • Un icono de una lupa suele representar una búsqueda.
• Consistencia: Todos los elementos similares deben comportarse de forma similar. La consistencia permite que el usuario aprenda rápidamente cómo funciona la aplicación.
• Rapidez: La interfaz debe responder inmediatamente a las acciones del usuario. En caso de que una operación tarde varios segundos en completarse, la aplicación debe mostrar algún tipo de respuesta:
  • Un indicador de carga.
  • Una barra de progreso.
  • Un mensaje informativo.
• Accesibilidad: Todas las personas deberían poder utilizar la aplicación independientemente de sus capacidades.
• Adaptabilidad: La interfaz debe adaptarse correctamente a cualquier tamaño de pantalla.

2.3 La importancia de la primera impresión

Diversos estudios sobre experiencia de usuario muestran que una persona suele formarse una opinión inicial sobre una página web en apenas unos segundos. Durante ese breve tiempo el usuario decide si:

• La página parece profesional.
• Encuentra fácilmente la información.
• Confía en el sitio.
• Continúa navegando o abandona la página.

Por este motivo, el diseño visual tiene un impacto directo sobre la percepción de calidad de una aplicación. Pero es importante recordar que una interfaz bonita no tiene por qué ser una buena interfaz.

3.1 Interfaz de línea de comandos

La interfaz de línea de comandos o interfaz de línea de órdenes (en inglés: command-line interface, CLI) es un tipo de interfaz de usuario de ordenador que permite a los usuarios dar instrucciones a algún programa informático o al sistema operativo por medio de una línea de texto simple.

Las CLI pueden emplearse interactivamente, escribiendo instrucciones en alguna especie de entrada de texto, o pueden utilizarse de una forma mucho más automatizada (archivo batch), leyendo órdenes desde un archivo de scripts.

Esta interfaz existe casi desde los comienzos de la computación, superada en antigüedad solo por las tarjetas perforadas y mecanismos similares. Los ordenadores tenían conectadas “terminales tontas” que permitían enviar comandos al ordenador.

Hoy en día la línea de comandos se utiliza a través de programas denominados “emulador de terminales” que ejecutan un intérprete de comandos (llamado “shell”). Estos intérpretes, dependiendo del sistema operativo se pueden elegir, por ejemplo:

• En Windows se puede hacer uso del antiguo cmd o el más nuevo y mejorado PowerShell. También se puede utilizar otros, pero no vienen de serie instalados (como bash)
• En sistemas GNU/Linux el intérprete más utilizado y que está instalado en la gran mayoría de distribuciones es bash. En los últimos años ha ganado mucho mercado zsh gracias al framework Oh-my-zsh.
• En sistemas MacOS el intérprete por defecto es zsh.

Los conceptos de CLI, shell y emulador de terminal no son lo mismo ya que CLI se refiere al paradigma, mientras que un shell o un emulador de terminal son programas informáticos específicos, que usualmente en conjunto implementan la CLI. Sin embargo, los tres suelen utilizarse como sinónimos.

3.2 Interfaz gráfica de usuario

La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface), es un programa informático que actúa de interfaz de usuario, en la que hoy en día utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.

Su función principal es proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de un ordenador.

3.2.1 Interfaz en modo texto

Las interfaces gráficas no nacen con los escritorios, si no que ya en pasos anteriores existen librerías que simulan ventanas o entornos haciendo uso de caracteres de texto y colores.

Hay que tener en cuenta que estos interfaces se solían utilizar en máquinas con muy pocos recursos y con sistemas operativos en los que no existía un interfaz gráfica.

3.2.2 Primeras investigaciones y desarrollos

El proyecto de “Aumento del Intelecto Humano” de Doug Engelbart en el Stanford Research Institute (en Menlo Park, EE. UU.) en la década de los 60 desarrolló el oN-Line System, que incorporaba un cursor manejado con un ratón y múltiples ventanas usadas para trabajar con hipertexto.

Mucha de la investigación inicial estuvo basada en como los niños pequeños aprenden. Por lo que el diseño se basó en las primitivas infantiles de coordinación mano-ojo, en lugar de usar lenguajes de comandos.

El GUI fue inicialmente desarrollado en Xerox PARC (Palo Alto Research Center) por Alan Kay, Larry Tesler, Dan Ingalls y algunos investigadores más. Usaba ventanas, iconos y menús, incluyendo el primer menú desplegable fijo, para dar soporte a comandos como abrir ficheros, borrar y mover ficheros, etc.

En 1981 Xerox presentó un producto innovador, el Star, incorporando muchas de las innovaciones de PARC. Aunque no fue un éxito comercial, el Star influenció de manera importante los futuros desarrollos, por ejemplo en Apple, Microsoft y Sun Microsystems.

En 1979, el equipo encabezado por Steve Wozniak, Steve Jobs y Jef Raskin (junto con antiguos trabajadores de Xerox) continuaron con las ideas vistas en Xerox PARC para lanzar en 1983 el ordenador “Apple Lisa”, el primer ordenador con interfaz gráfico. No fue un éxito en ventas, pero inició la era de lo que se podrían denominar “los sistemas operativos con escritorio”.

En 1984 Apple lanzó el Macintosh, el cual presentó una evolución del sistema operativo de Lisa, llamado “System”, en el que se puede apreciar partes que apenas han cambiado desde entonces.

Al año siguiente Microsoft sacaría Windows 1.0, que era un GUI para su sistema operativo MS-DOS, pero no sería hasta la versión de Windows 3.0 de 1990 en la que su popularidad explotó.

3.3 Uso masivo del escritorio

Con la llegada de la década de 1990, en la que los ordenadores personales (PC, del inglés personal computer) se popularizan y empiezan a llegar a las casas y negocios, hizo que se creara un mercado de usuarios sin conocimientos avanzados que requerían de facilidades de uso.

El “boom” comenzó con el Windows 3.11, pero sobre todo con Windows 95, que consiguió ocultar el núcleo del sistema operativo subyacente (MS-DOS) para mostrar directamente el interfaz gráfico desde el inicio.

Apple compra a NeXT (empresa fundada por Steve Jobs) y utiliza su sistema operativo como los cimientos de Mac OS 8. Posteriormente cambiarían la arquitectura del sistema operativo para ser de estilo UNIX y así presentar Mac OS X en 2001.

Durante estos años y principios de los 2000, los interfaces de usuario van evolucionando a medida que evoluciona la potencia de los ordenadores, pero siguiendo la misma tónica de simular un escritorio real en el ordenador.

Se anuncian entornos de escritorio libres como Gnome y KDE, que evolucionan en paralelo dentro de mundo de GNU/Linux llegando a crearse casi una guerra entre ellos y entre los usuarios (Enlace 1, Enlace 2).

Cada sistema operativo y cada sistema de escritorio realizaba sus propias evoluciones que si tenían calado eran “copiadas” en los otros, generando también ciertas “modas” en colores, iconos o efectos de ventanas.

3.4 Interfaces web

Entre finales de los 90 y principios de los 2000, el auge de internet en todo el mundo hace que los portales web también sufran una gran evolución en sus interfaces.

También hay que tener en cuenta que las versiones HTML y CSS de la época no era tan avanzado como lo son hoy, y que las posibilidades de ejecución de javascript tampoco era tan potente como lo es hoy en día. Las interfaces pueden verse limitadas por la propia tecnología

Por otro lado, es habitual que la imagen de la compañía cambie, ya sea por cambios de logotipo, colores corporativos, moda en el tono de los colores... y todo eso también hace que los interfaces sufran modificaciones.

3.5 Interfaces móviles

En el caso de los teléfonos móviles, debido a que no existía un sistema estándar de visualización, cada fabricante iba creando su propio interfaz a medida que las pantallas iban creciendo en tamaño, resolución, colores...

Los primeros móviles carecían de pantalla, posteriormente comenzaron a tener pequeñas pantallas LCD monocromas, en algunos casos con una única línea de texto.

Posteriormente comenzaron a tener pantallas a color y cada compañía crea su propio sistema operativo. Existe un intento de crear un sistema operativo entre varias compañías llamado Symbian, pero al final es Nokia la desarrolladora y la que más uso le da.

Durante los primeros años de la década de los 2000 también se ponen de moda las PDA (personal digital assistant, asistente digital personal u ordenadores de bolsillo), que normalmente hacían uso de un lapiz para hacer funcionar la pantalla táctil (resistiva) que tenían.

Todo cambió con la llegada del iPhone en el 2007 y los primeros smartphones, donde las pantallas táctiles capacitativas (se manejan con el dedo) cobran protagonismo. Estas pantallas aparte de ser táctiles también permiten gestos con varios dedos, dando lugar a nuevos efectos de interactuar con el interfaz.

Apple se decanta por un único botón mientras que los sistemas operativos Android (como el HTC Desire del 2009) tienen al menos cuatro para manejar ciertas tareas del sistema y de la aplicación que se está usando en el momento.

Con estos cambios, los sistemas operativos y las interfaces sufren un cambio radical, donde buscan la facilidad del usuario y aparecen los “gestos” como nueva manera de interactuar con el interfaz:

• Tap: tocar la pantalla (similar al “click” con el ratón)
• Double tap: doble toque, que dependiendo de la aplicación puede hacer un zoom específico.
• Scroll: presionando con el dedo y subiendo para arriba o para abajo se hace scroll sobre el interfaz.
• Flick: si se hace un gesto rápido hacía arriba o hacia abajo se hace scroll, mientras que si es a izquierda o derecha el movimiento dependerá de si hay más pantalla.
• Pinch in: hacer zoom acercando lo que se quiere ver.
• Pinch out: hacer zoom alejando el objeto.

Con todo ello, surge un nuevo “problema” que hasta este momento no se había planteado en los interfaces, que es la rotación del dispositivo. Esta rotación debe hacer que la aplicación que se está ejecutando se adapte a la nueva posición del terminal, pasando de vertical a horizontal o viceversa.

Como evolución de estos dispositivos surgen las tablets en donde se sigue la misma filosofía de gestos, pero las pantallas táctiles de mayor tamaño permiten tener más espacio para información. En lugar de usar los interfaces de escritorio, evolucionan los interfaces de los móviles.

Al tener más espacio, no se utilizan las aplicaciones de móviles y se “escalan”, si no que surgen nuevas posibilidades para que los interfaces dispongan de nuevos menús o lugares donde añadir más información.

3.6 Realidad virtual y realidad aumentada

El siguiente paso en el desarrollo de interfaces se encuentra en la conocida como realidad aumentada y en la realidad virtual. Aunque puedan parecer términos que están ahora de moda, su estudio y evolución lleva décadas fraguándose.

Los primeros pasos que se dieron en este sentido son los denominados “head-up display”, que son pantallas transparentes que presentan información al usuario dejando ver lo que está en la parte trasera de la pantalla. De esta manera, el usuario no tiene que girar la cabeza para obtener la información.

En algunos casos esta pantalla puede estar entre el usuario y el salpicadero, integrada en el salpicadero o también como una pantalla puesta en el casco del piloto y cerca del ojo.

Por otro lado, tenemos la realidad virtual, que es un entorno simulado que da una sensación de inmersión al usuario ofreciéndole la posibilidad de moverse en él, y en algunos casos interactuar con elementos del entorno.

Para ello, suele ser habitual contar con unas gafas que nos mostrarán el entorno virtual, y también dispondremos de unos mandos para poder interactuar con el entorno.

Para poder movernos por el entorno, algunos de estos sistemas hacen uso de trackers, de esta manera nos podremos desplazar por el entorno virtual sin tener que usar los mandos.

El siguiente paso es la conocida como realidad aumentada, en el que se trata de integrar elementos virtuales en la vida real. No es algo nuevo, ya que lleva años existiendo en juegos y aplicaciones.

Cn la idea de que la realidad aumentada sea de uso cotidiano han empezado a evolucionar los sistemas para que poco a poco esto vaya fraguando, aunque el coste todavía sigue siendo elevado. A día de hoy, tampoco está claro cuál será el beneficio y el rendimiento que tendrá.

En el caso de las Apple Vision Pro prometen una experiencia de realidad aumentada utilizando únicamente gestos de las manos para moverse a través de su interfaz.

3.7 Interfaces por voz

La primera herramienta que permitió ejecutar reconocimiento digital de voz fue presentado en 1962. Aunque hubo distintas aplicaciones y asistentes virtuales antes, no fue hasta la aparición de Siri en 2010 cuando su uso pasó al gran público.

Los interfaces por voz hoy en día están asociados al teléfono móvil y a los asistentes virtuales que son capaces de reconocer lenguaje natural y ejecutar las acciones que se les pide. Los asistentes más conocidos son Siri, Alexa y Google Assistant.

6.1 Los primeros años: páginas web estáticas

En 1991 Tim Berners-Lee comienza el desarrollo de HTML en el CERN. No sólo creó el lenguaje HTML si no que creó el protocolo HTTP (HyperText Transfer Protocol) y el primer servidor web.

Las primeras páginas web estaban escritas en HTML y tenían una estructura extremadamente simple. No existía ninguna separación entre contenido y presentación. El propio HTML indicaba tanto la estructura como la apariencia del documento.

Durante estos primeros años aparecieron navegadores como:

• WorldWideWeb
• Mosaic
• Netscape Navigator

6.2 La guerra de los navegadores (1995-2000)

A mediados de los años noventa Internet comenzó a crecer rápidamente. Microsoft lanzó Internet Explorer, mientras que Netscape seguía dominando el mercado. Ambas empresas comenzaron una intensa competencia por incorporar nuevas características antes que su rival.

Este periodo se conoce como la guerra de navegadores debido a que cada navegador implementaba nuevas etiquetas HTML propias. Como consecuencia:

• Una página podía funcionar correctamente en un navegador y presentar errores en otro.
• Los desarrolladores debían crear versiones específicas para distintos navegadores.
• El mantenimiento de los sitios web resultaba complicado.

Era habitual que las webs tuviesen mensajes como “Sitio optimizado para Internet Explorer” o “Compatible con Netscape Navigator” debido a esta problemática.

<table>
    <tr>
        <td>Menú</td>
        <td>Contenido</td>
    </tr>
</table>

6.3 La aparición de CSS

En 1996 apareció CSS (Cascading Style Sheets), cuyo objetivo fue resolver uno de los principales problemas del desarrollo web: separar el contenido de la presentación.

<h1>Título</h1>

h1{
    color: blue;
    text-align:center;
}

Desde ese momento:

• HTML describía la estructura.
• CSS controlaba el aspecto visual.

Esta separación ofrecía numerosas ventajas:

• Código más limpio.
• Mayor facilidad de mantenimiento.
• Reutilización de estilos.
• Mejor accesibilidad.
• Diseño uniforme en todo el sitio web.

Aunque CSS apareció en 1996, pasaron varios años hasta que los navegadores comenzaron a implementarlo correctamente.

6.4 La Web 2.0

A comienzos de los años 2000 Internet cambió profundamente. Los usuarios dejaron de ser simples lectores para convertirse también en creadores de contenido. A este periodo se le conoce como Web 2.0.

Las páginas web comenzaron a incorporar:

• Blogs.
• Redes sociales.
• Wikis.
• Comentarios.
• Foros.
• Comercio electrónico.

El diseño también evolucionó considerablemente. Se hicieron populares:

• Grandes botones.
• Sombras.
• Degradados.
• Bordes redondeados.
• Iconos coloridos.
• Menús más elaborados.

6.5 HTML5 y CSS3

En torno a 2010 comenzaron a consolidarse dos grandes estándares: HTML5 y CSS3, que transformaron completamente el desarrollo web. Entre las novedades más importantes encontramos:

6.6 El auge de los dispositivos móviles

En 2007 apareció el primer iPhone, y aunque ya había dispositivos móviles que permitían navegar por Internet, ninguno llegaba a la calidad de renderizado de este, ya que era un navegador real. Poco después comenzaron a popularizarse los teléfonos inteligentes, lo que hizo que cambiase completamente la forma de navegar por Internet.

Los diseñadores ya no podían crear páginas únicamente para monitores de escritorio, ya que ahora era necesario pensar en:

• Pantallas pequeñas.
• Pantallas táctiles.
• Distintas resoluciones.
• Diferentes orientaciones.

6.6.1 Responsive Web Design

En 2010 Ethan Marcotte popularizó el término Responsive Web Design. Su propuesta consistía en crear páginas capaces de adaptarse automáticamente al tamaño de cualquier pantalla.

Para ello comenzaron a utilizarse:

• Diseños fluidos.
• Media Queries.
• Imágenes adaptables.
• Unidades relativas.

Actualmente el diseño responsive es un requisito imprescindible en prácticamente cualquier sitio web.

6.7 La llegada de Flexbox y CSS Grid

Durante muchos años crear diseños complejos mediante CSS resultaba complicado. Se utilizaban técnicas como float, tablas y posicionamientos absolutos.

Estas soluciones eran poco flexibles y difíciles de mantener. Esto cambió con la llegada de flexbox y CSS Grid, que permitió un salto de calidad y mantenimiento en la maquetación. Hoy en día ambos sistemas constituyen la base del diseño moderno.

6.8 Evolución en el diseño

Durante muchos años las interfaces intentaban imitar objetos reales. Esta filosofía recibe el nombre de skeuomorfismo:

• Los botones parecían botones físicos.
• Las carpetas parecían carpetas reales.
• Los calendarios imitaban calendarios de papel.

A partir de 2012 comenzó a imponerse una tendencia completamente distinta denominada Flat Design. Sus características principales son:

• Colores sólidos.
• Pocos efectos visuales.
• Ausencia de texturas.
• Sombras mínimas.
• Diseño limpio.
• Iconos sencillos.

Microsoft fue uno de los primeros grandes impulsores de este estilo con Windows Phone. Posteriormente Apple y Google adoptaron diseños similares. En 2014 Google presentó Material Design, que no se trataba únicamente de un conjunto de estilos visuales, sino de un completo sistema de diseño. Material Design define:

• Colores.
• Tipografías.
• Animaciones.
• Iconografía.
• Espaciados.
• Componentes reutilizables.

Su objetivo era ofrecer una experiencia consistente en todas las aplicaciones de Google. Hoy continúa evolucionando y es uno de los sistemas de diseño más influyentes del desarrollo web.

6.9 Mirando hacia el futuro

El diseño web continúa evolucionando constantemente. Algunas tendencias actuales son:

• Modo oscuro (Dark Mode).
• Aplicaciones web progresivas (PWA).
• Microanimaciones y animaciones discretas.
• Diseño basado en componentes.
• Sistemas de diseño compartidos.
• Accesibilidad desde las primeras fases del desarrollo.
• Alto rendimiento.

Aunque las herramientas cambian con rapidez, los principios fundamentales de un buen diseño permanecen prácticamente inalterables.

Introducción a CSS

7.1 El problema de HTML

HTML nació como un lenguaje para describir la estructura de un documento, no su apariencia, por lo que se podía definir el contenido mediante títulos, párrafos, listas y enlaces, pero apenas ofrecía opciones para controlar la presentación del documento. Esto provocaba que la mayoría de las páginas tuvieran un aspecto muy similar: fondo gris, texto negro, enlaces azules y una distribución muy sencilla.

A medida que Internet comenzó a popularizarse, empresas y organizaciones quisieron crear páginas con un aspecto más atractivo y diferenciado. Sin embargo, HTML no había sido diseñado para ello. No existía ningún mecanismo para definir aspectos como:

• Colores.
• Márgenes.
• Tipografías.
• Espaciados.
• Posición de los elementos.

7.2 La llegada de etiquetas de presentación

Como los diseñadores querían controlar el aspecto de las páginas, los navegadores comenzaron a incorporar etiquetas HTML relacionadas con la presentación como por ejemplo: <font>, <center>, <big> …

Estas etiquetas solucionaban parcialmente el problema, pero generaban otros nuevos, como que si queríamos añadir el tipo de fuente se lo teníamos que especificar a todos los textos. Aparte, se mezclaba el contenido con la presentación, el mantenimiento era costoso y cada navegador interpretaba algunas etiquetas de forma distinta, o no las interpretaba directamente.

7.3 El nacimiento de CSS

Para solucionar estos problemas, en 1994 el informático noruego Håkon Wium Lie propuso un nuevo lenguaje denominado Cascading Style Sheets, más conocido por sus siglas CSS. Su propuesta consistía en separar completamente dos aspectos diferentes:

• HTML describiría el contenido y la estructura.
• CSS definiría únicamente la apariencia.

La idea fue muy bien recibida y, junto con otros colaboradores como Bert Bos, evolucionó hasta convertirse en un estándar del W3C, y en diciembre de 1996 se publicó la primera recomendación oficial: CSS Level 1 (CSS1). Permitía modificar aspectos como:

• Colores.
• Tipografías.
• Márgenes.
• Sangrías.
• Alineación del texto.
• Fondos.

7.4 CSS2

En 1998 apareció CSS2, incorporando numerosas mejoras. Entre ellas destacaban:

• Posicionamiento absoluto.
• Posicionamiento relativo.
• Tipos de medios (pantalla, impresión…).
• Capas.
• Nuevos selectores.
• Tablas más completas.

Gracias a CSS2 comenzaron a desarrollarse diseños mucho más complejos. Sin embargo, los navegadores todavía presentaban importantes diferencias en su implementación. Durante muchos años era habitual que una página funcionara correctamente en un navegador y mostrara errores en otro.

7.5 CSS3: una nueva forma de evolucionar

En lugar de crear una única especificación enorme, el W3C decidió dividir CSS en pequeños módulos independientes. Aunque popularmente hablamos de CSS3, en realidad no existe un documento oficial llamado “CSS3”. Actualmente CSS está formado por numerosos módulos, cada uno con su propio ritmo de desarrollo. Algunos ejemplos son:

• Selectores.
• Fondos y bordes.
• Animaciones.
• Transiciones.
• Flexbox.
• Grid Layout.
• Variables CSS.
• Media Queries.

Este sistema permite incorporar nuevas funcionalidades sin esperar años para publicar una nueva versión completa.

7.6 El nacimiento de los preprocesadores CSS

Para resolver estas limitaciones aparecieron los llamados preprocesadores CSS. Un preprocesador permite escribir en un lenguaje más potente y cómodo que posteriormente se transforma automáticamente en CSS estándar. Los dos preprocesadores más conocidos son:

• SASS: nace en 2006 y permite crear variables, anidamiento, sistema de mixins (podría definirse como funciones) para no tener que repetir código, herencia, bucles …
• LESS: nace en 2009 inspirado por SASS y la ventaja es que mediante JavaScript permite ejecutarse en el navegador sin tener que preprocesarse previamente.

Hasta hace unos años prácticamente todos los grandes proyectos utilizaban SASS o LESS internamente, ya que permitían:

• Reducir la repetición de código.
• Organizar grandes proyectos.
• Reutilizar componentes.
• Facilitar el mantenimiento.
• Trabajar en equipo.
• Automatizar tareas.

En aquella época CSS todavía no disponía de muchas de estas características.

Con el paso del tiempo CSS ha ido incorporando muchas funciones como variables, nuevos selectores, algunas funciones matemáticas, … Como consecuencia, muchos proyectos pequeños y medianos ya pueden desarrollarse utilizando únicamente CSS.

Sin embargo, SASS sigue siendo muy utilizado en proyectos grandes porque continúa ofreciendo ventajas relacionadas con la organización del código y la reutilización de estilos.

7.7 CSS en la actualidad

Hoy en día CSS es un lenguaje extremadamente potente y en continua evolución en el que participan distintas empresas para proponer nuevas características para ser añadidas.

8.1 Incorporar varias hojas de estilo

En proyectos reales es muy habitual dividir el código CSS en varios archivos para facilitar su mantenimiento. En ese caso el navegador descargará y aplicará todas las hojas de estilo en el orden en el que aparecen. Cuando varias hojas de estilo modifican la misma propiedad de un mismo elemento, el orden en el que se cargan puede afectar al resultado final.

<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/titulos.css">
</head>

Siguiendo con el ejemplo anterior, supongamos que contienen el siguiente código:

h1 {
    color: blue;
}

h1 {
    color: red;
}

El color final del título será rojo, ya que la segunda hoja de estilos sobrescribe la primera. Este comportamiento forma parte del mecanismo conocido como cascada (cascade), que estudiaremos con detalle más adelante.

No existe un número fijo de archivos CSS que deba tener un proyecto. En aplicaciones pequeñas suele ser suficiente con una única hoja de estilos, pero a medida que el proyecto crece, resulta habitual dividir el código en varios archivos según su función.

8.2 CSS interno

Se puede escribir estilos CSS dentro de una página HTML directamente usando las etiquetas <style> y tiene que estar dentro de la cabecera <head>.

<html>
  <head>
    <style>
      body {
        background-color: linen;
      }  
      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Existen sistemas para generar HTML unificado (para generar HTML auto-contenidos) para generar webs estáticas, pero durante el desarrollo no se debe usar CSS dentro del HTML.

8.3 Estilos CSS inline

Se puede utilizar estilos CSS dentro del código HTML, lo que se denominan estilos inline. Esta técnica era muy utilizada al inicio de la web, pero no es recomendable usarla ya que va en contra de la reutilización de los estilos CSS.

También va en contra de la separación entre maquetación y estilos, lo que puede dificultar la reutilización de componentes en distintos apartados de una misma aplicación. En el siguiente ejemplo se ve un ejemplo de estilo inline y cómo sería con HTML y CSS separado:

<p style="
 color: red;
 font-style: italic;
">
    Texto
</p>

<p class="special">
    Texto
</p>

.scpecial {
  color: red;
  font-style: italic;
}

En el primer ejemplo, si quisiésemos otro p con el mismo estilo, habría que volver a escribir dicho estilo, mientras que con la separación sólo sería necesario poner la clase. Si en el primer ejemplo queremos añadir un nuevo estilo, habría que modificarlo en varios sitios, mientras que con la separación sólo sería necesario hacerlo en la hoja CSS.

8.4 Ejemplos de la importancia de CSS

Las hojas de estilo CSS nos permiten hacer que una página web se vea completamente diferente cambiando dicha hoja de estilo. Imaginemos una empresa que tiene un producto de tienda online para varios clientes.

• Los estilos CSS están inline, modificar los estilos para cada cliente supondría:
  • Copiar todo el código fuente.
  • Modificar los estilos inline.
  • Si queremos añadir una nueva feature, habría que modificarlo en cada cliente.
  • Volver a modificar los estilos inline.
• Los estilos CSS están separados de HTML:
  • Se hace una copia del CSS para cada cliente y se modifica con estilos propios.
  • Si queremos añadir una nueva feature, se actualiza sólo el HTML en cada cliente.

A continuación un ejemplo del mismo código HTML con distintas hojas de estilo CSS. Ejemplos obtenidos de W3Schools.

9.1 Regla CSS

Una hoja de estilos está formada por un conjunto de reglas CSS. Cada regla indica:

• Qué elementos deben modificarse.
• Qué propiedades deben cambiar.
• Qué valor debe asignarse a cada propiedad.

La estructura general es la siguiente:

selector {
    propiedad: valor;
}

h1 {
    color: red;
}

Esta regla indica que todos los elementos <h1> deben mostrarse en color rojo.

9.2 Declaraciones

Cada pareja formada por una propiedad y un valor recibe el nombre de declaración. Una misma regla puede contener varias declaraciones. En el siguiente ejemplo hay tres:

h1 {
    color: blue;
    font-size: 40px;
    text-align: center;
}

El conjunto de declaraciones comprendido entre las llaves recibe el nombre de bloque de declaraciones.

9.3 Comentarios

Los comentarios permiten añadir información al código sin que el navegador la interprete. Pueden ser de una única línea o varias:

/* Estilos generales */
body {
    margin: 0;
}

/*
  Curso: DAW
  Fecha: Septiembre de 2026
*/

9.4 Sensibilidad a mayúsculas y minúsculas

Tanto los nombre de propiedades como las palabras clave deben escribirse en minúsculas. Aunque algunos navegadores aceptan determinadas variantes, es recomendable seguir siempre las convenciones del lenguaje.

9.5 Espacios en blanco

CSS ignora los espacios en blanco innecesarios. Las siguientes reglas son equivalentes.

h1 {
color:red;
}

h1 {
  color:red;
}

h1 {   color:red;     }

Todas producen exactamente el mismo resultado, pero únicamente la segunda resulta fácil de leer.

9.6 Sangrado (indentation)

El sangrado consiste en desplazar ligeramente el código hacia la derecha para mostrar su estructura. Aunque CSS funciona correctamente sin sangrado, utilizar una indentación uniforme mejora enormemente la legibilidad. La mayoría de editores realizan esta tarea automáticamente. Podemos elegir si queremos que sea dos espacios o cuatro.

9.7 El punto y coma

Cada declaración finaliza mediante un punto y coma ;. Cuando una regla contiene varias declaraciones, el punto y coma resulta obligatorio.

9.8 ¿Qué ocurre cuando existe un error?

Una característica muy importante de CSS es que los navegadores intentan seguir interpretando la hoja de estilos aunque encuentren errores.

h1 {
    color: blue;
    colr: red;
    font-size: 40px;
}

En este caso:

• color: blue; se aplicará correctamente.
• colr: red; será ignorado.
• font-size: 40px; volverá a aplicarse normalmente.

Este comportamiento hace que pequeños errores no impidan visualizar la página.

9.9 Orden de las propiedades

CSS no obliga a escribir las propiedades siguiendo un orden determinado. Los siguientes producen el mismo resultado:

h1 {
    color: blue;
    margin: 20px;
    font-size: 30px;
}

h1 {
    font-size: 30px;
    margin: 20px;
    color: blue;
}

No obstante, en proyectos profesionales suele seguirse un orden para facilitar la lectura.

1. Posicionamiento.
2. Modelo de cajas.
3. Tipografía.
4. Colores.
5. Animaciones.

Mantener siempre el mismo criterio mejora el mantenimiento del código.

10.1 Selector de tipo

El selector de tipo permite seleccionar todos los elementos HTML de un determinado tipo.

<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>

p {
    color: blue;
}

Teniendo en cuenta el ejemplo anterior, el CSS selecciona todos los elementos de tipo <p> (párrafo) añadiéndoles el color azul al texto.

Los selectores de tipo son sencillos, pero pueden resultar demasiado generales cuando necesitamos aplicar diferentes estilos a elementos del mismo tipo.

10.2 Selector universal

El selector universal se representa mediante un asterisco (*) y selecciona todos los elementos del documento.

* {
    margin: 0;
    box-sizing: border-box;
}

El selector universal se utiliza frecuentemente para realizar pequeños ajustes generales. Aunque el selector universal es útil, no conviene utilizarlo indiscriminadamente para aplicar muchas propiedades a todos los elementos, ya que puede generar reglas innecesarias y dificultar el mantenimiento.

10.3 Selector de clase

Los selectores de clase permiten aplicar estilos a determinados elementos sin afectar a todos los elementos del mismo tipo. En HTML se utiliza el atributo class.

<h1 class="importante grande">
  Título importante
</h1>

<p class="importante">
  Este texto es importante.
</p>

<p class="grande">
  Este texto es grande.
</p>

.importante {
  color: red;
}

.grande {
  font-size: 50px;
}

En CSS, una clase se selecciona utilizando un punto (.) seguido del nombre de la clase. Una clase puede ser utilizada varias veces y en distintos elementos, por lo que debemos tener eso en cuenta, pero más adelante hablaremos de ello.

Por otro lado, el atributo class puede contener varias clases separadas mediante espacios, por lo que recibirá los estilos de ambas clases. De esta manera podemos reutilizar y combinar estilos dependiendo de nuestras necesidades.

10.4 Selector de identificador

HTML también dispone del atributo id que sólo debe ser utilizado una única vez en cada documento HTML. Para seleccionar un elemento mediante su identificador utilizamos el carácter #:

<h1 id="titulo-principal">
    Mi página web
</h1>

#titulo-principal {
    color: blue;
}

El selector se aplicará al elemento cuyo id sea titulo-principal.

10.5 Selector por atributo

CSS permite seleccionar elementos que poseen determinados atributos HTML. Por ejemplo, podemos seleccionar todos los elementos que tengan el atributo type:

<input type="text">

<input type="email">

<input type="password">

input[type] {
    border: 1px solid black;
}
input[type="email"] {
    background-color: lightblue;
}

También podemos seleccionar un valor concreto del atributo, en el ejemplo type="email". En este caso, únicamente el campo de correo electrónico tendrá el fondo azul claro.

Los selectores de atributo son especialmente útiles cuando necesitamos aplicar estilos dependiendo de las características de un elemento HTML.

Otro ejemplo para enlaces con atributo target.

<a href="http://google.com"
    target="_self">
    link
</a>
<a href="http://google.com" 
    target="_blank">
    link
</a>

a[target] {
    font-weight: bold;
}
a[target="_blank"] {
    color: red;
}

10.6 Agrupar selectores

Podemos aplicar las mismas reglas a varios selectores separándolos mediante comas. La agrupación evita repetir código.

h1,
h2,
h3 {
    font-family: sans-serif;
}

h1, h2, h3 {
    font-family: sans-serif;
}

10.7 Selectores descendientes

CSS permite seleccionar elementos que se encuentran dentro de otros elementos. Podemos seleccionar únicamente los párrafos que están dentro de <article>.

<article>
    <p>Primer párrafo.</p>
    <p>Segundo párrafo.</p>
</article>

<article>
    <div>
        <p>
            Texto.
        </p>
    </div>
</article>

<p>Párrafo exterior.</p>

article p {
    color: blue;
}

El espacio entre article y p indica que estamos seleccionando los elementos<p> que son descendientes de <article>.

El resultado será:

• Primer párrafo → azul.
• Segundo párrafo → azul.
• Párrafo exterior → sin este estilo.
• Texto → azul.

El selector descendiente no se limita a los hijos directos, si no a toda la descendencia.

10.8 Selector de hijo directo

En ocasiones no queremos seleccionar cualquier descendiente, sino únicamente los hijos directos. Para ello utilizamos el símbolo >.

<article>
  <p>Párrafo directo.</p>
  <div>
    <p>Dentro de un div.</p>
  </div>
</article>

article > p {
    color: blue;
}

De esta manera sólo se selecciona únicamente el primer párrafo, porque el segundo párrafo no es hijo directo de <article>.

10.9 Selector de hermano adyacente

CSS permite seleccionar elementos que aparecen inmediatamente después de otro. Para ello se utiliza el símbolo +.

<h2>Título</h2>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>

h2 + p {
    color: blue;
}

Con la regla anterior sólo se selecciona el primer párrafo, pero el segundo no.

10.10 Selector de hermanos posteriores

Para seleccionar todos los hermanos que aparecen después de un elemento se usa ~.

<h2>Título</h2>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<div>Otro elemento.</div>
<p>Tercer párrafo.</p>

h2 ~ p {
    color: blue;
}

Con la regla anterior selecciona todos los elementos <p> que sean hermanos posteriores de <h2>. Por tanto, los tres párrafos serán seleccionados.

10.11 Pseudoclases

Las pseudoclases permiten seleccionar elementos en función de un estado o una condición, y se representan mediante dos puntos (:). Unos ejemplos son:

• :hover: Cuando el usuario sitúa el puntero del ratón sobre el elemento.
• :focus: Cuando un elemento tiene el foco.
• :active: Representa el momento en el que un elemento está siendo activado
• :visited: Enlaces que el usuario ya ha visitado

10.12 Pseudoelementos

Los pseudoelementos permiten seleccionar determinadas partes de un elemento o generar contenido asociado a él. Se representan normalmente mediante dos puntos (::).

<p class="aviso">
    Este campo es obligatorio.
</p>

p::first-letter {
    font-size: 50px;
}
p::first-line {
    font-weight: bold;
}
.aviso::before {
    content: "⚠ ";
}
.enlace::after {
    content: " →";
}

Las reglas creadas hacen:

• Modifica la primera letra de cada párrafo.
• Permite modificar la primera línea de un texto.
• Permite insertar contenido antes del contenido del elemento.
• ::after funciona de forma similar, pero inserta el contenido después.

10.13 Combinación de selectores

Los selectores pueden combinarse para crear reglas mucho más específicas. Por ejemplo:

<article class="destacado">
  <p>Este párrafo será azul.</p>
</article>

article.destacado p {
    color: blue;
}

Esta regla selecciona los párrafos que se encuentran dentro de un elemento que:

• Es un <article>.
• Tiene la clase destacado.

También podemos combinar clases:

<button class="boton">
    Aceptar
</button>

<button class="boton importante">
    Eliminar
</button>

.boton.importante {
    background-color: red;
}

La regla selecciona únicamente los elementos que tienen las dos clases:

10.14 Resumen de selectores

10.15 Buenas prácticas

Al escribir selectores CSS conviene seguir algunas recomendaciones.

• Utilizar clases para los estilos reutilizables.
• Evitar selectores excesivamente complejos, ya que dificultan el mantenimiento posterior.
• Utilizar nombres descriptivos con las clases e identificadores únicos.

11.1 Tipos de selectores y especificidad

La especificidad de un selector depende principalmente del tipo de selector utilizado. Podemos establecer, de mayor a menor prioridad, la siguiente clasificación:

1. Estilos inline.
2. Identificadores (#id).
3. Clases, atributos y pseudoclases.
4. Elementos y pseudoelementos.

Para comprender la especificidad podemos representar un selector mediante cuatro valores A B C D que podemos imaginar como una puntuación. Imaginemos los siguientes ejemplos:

p {
    color: blue;
}

.mensaje {
    color: green;
}

#mensaje {
    color: red;
}

Las puntuaciones quedarían:

• 0 0 0 1: porque contiene un selector de tipo elemento.
• 0 0 1 0: por ser una clase.
• 0 1 0 0: por ser identificador.

Es importante comprender que los valores de especificidad no se suman como una puntuación normal. Se comparan de izquierda a derecha. Por ejemplo 0 1 0 0 > 0 0 20 0, el primero es más específico aunque el segundo selector tenga 20 clases, ya que el selector de identificador es más prioritario que las clases. Existe calculadoras para calcular el valor y comparar entre distintas reglas y saber cuál es más específica que otra.

11.2 Combinación de selectores

La especificidad también se acumula cuando combinamos selectores. Si seguimos la regla explicada previamente, analicemos los siguientes ejemplos:

article p {
    color: blue;
}

article .mensaje {
    color: green;
}

Las puntuaciones quedarían:

• 0 0 0 2: porque contiene dos selector de tipo.
• 0 0 1 1: por tener un selector de tipo y otro de clase. Por lo tanto, tiene mayor especifidad que la anterior

11.3 Varias clases

Si un selector contiene varias clases, todas ellas cuentan para la especificidad.

.mensaje.importante {
    color: red;
}

.mensaje {
    color: blue;
}

La primera regla es más especifica que la segunda.

11.4 Selectores de atributos

Los selectores de atributos tienen la misma importancia que las clases.

input[type="email"] {
    border-color: blue;
}

11.5 Pseudoclases

Las pseudoclases también cuentan como una clase a efectos de especificidad.

a:hover {
    color: red;
}

11.6 Pseudoelementos

Los pseudoelementos cuentan como selectores de tipo.

p::first-letter {
    font-size: 30px;
}

11.7 El selector universal

El selector universal no aporta especificidad. Lo mismo pasa con > + ~. Estos elementos sirven para establecer relaciones entre selectores, pero no aumentan la especificidad.

11.8 Especificidad frente a orden

La especificidad no es el único criterio que utiliza CSS. Cuando dos reglas tienen la misma especificidad, el orden de aparición puede determinar cuál se aplica. En el siguiente ejemplo ambos selectores tienen la misma puntuación y afectan al mismo tipo de elemento:

p {
    color: blue;
}
p {
    color: red;
}

A pesar de tener la misma puntuación, la regla que se aplica es la segunda, ya que aparece después y por tanto el texto será rojo.

11.9 Forzar declaración con !important

CSS proporciona una herramienta especial denominada !important que adquiere una prioridad especial dentro del mecanismo de la cascada. Puede utilizarse para forzar que una determinada declaración tenga prioridad sobre otras declaraciones normales.

Teniendo en cuenta el ejemplo anterior, al añadir !important a la primera regla se vuelve prioritaria y deja sin validez a la segunda:

p {
    color: blue !important;
}
p {
    color: red;
}

Cuando existen numerosos !important, se vuelve complicado saber qué regla terminará aplicándose, y por tanto no se recomienda utilizar como solución habitual a los problemas de estilos.

11.10 Herramientas del navegador

Las herramientas para desarrolladores de los navegadores permiten comprobar fácilmente qué reglas CSS se están aplicando. Por ejemplo, en Chrome o Firefox podemos seleccionar un elemento mediante el inspector y el navegador mostrará:

• Las reglas que afectan al elemento.
• Las propiedades aplicadas.
• Las propiedades sobrescritas.
• El archivo CSS donde se encuentra cada regla.
• La línea donde está definida.
• En algunos casos, información relacionada con la especificidad.

Si aparece una propiedad tachada significa que existe otra declaración para la misma propiedad que tiene prioridad. Aprender a identificar el orden y utilizar esta herramienta resulta fundamental para solucionar problemas de CSS.

<h1 id="titulo">Especificidad de CSS</h1>

<h2 class="azul">Primer ejemplo</h2>
<p class="base">Párrafo 1</p>

<h3 class="verde">Segundo ejemplo</h3>
<p id="importante" class="destacado">Segundo párrafo</p>

<h2 class="gris">Tercer ejemplo</h2>
<p class="base resaltado">Tercer párrafo</p>

<p class="importante">Cuarto párrafo</p>

p { color: black;}
h1 { color: darkgray;}
h2 { color: purple;}
h3 { color: brown;}
#titulo { color: red;}
.base { color: green;}
h2.azul { color: blue;}
p.destacado { color: orange;}
h3.verde { color: olive;}
p.resaltado { color: teal;}
p.importante { color: fuchsia !important;}
#importante { color: darkblue !important;}
h2.gris { color: gray;}

12.1 No todas las propiedades se heredan

Es importante tener en cuenta que no todas las propiedades CSS son heredables. Por ejemplo, color se hereda normalmente, pero propiedades relacionadas con el modelo de caja, como margin, no se heredan normalmente.

Por tanto, debemos distinguir entre

• Propiedades heredables: por defecto se establecen al valor calculado del elemento padre. Son propiedades relacionadas al texto, como color, font-family, font-size, font-style, line-height, text-align y visibility.
• Propiedades NO heredables: por defecto se establecen al valor inicial de la propiedad. Son propiedades relacionadas con el modelo de caja o el layout, como border, background, margin, padding, width y height.

Para saber qué propiedad es heredable, dentro de la documentación de MDN o W3C podemos ver la definición de Inherited, que si es True se hereda.

12.2 Forzar herencia con inherit

CSS proporciona la palabra clave inherit para indicar explícitamente que una propiedad debe utilizar el valor heredado del elemento padre.

Usando esta palabra también vamos a poder heredar atributos que no se heredarían.

<div>
    <p>Primer párrafo.</p>
    <p>Segundo párrafo</p>
</div>

div {
  border: 2px solid red;
}
p {
    border: inherit;
}

12.3 initial como reset

Podríamos definir initial como si fuese un reset, ya que establece el valor inicial definido para la propiedad según CSS.

Supongamos el siguiente ejemplo:

<div>
    <h1>Título</h1>>
    <p>primer párrafo</p>
</div>

div {
  color:red
}
h1 {
    color: initial;
}

Establecemos en div un color que por herencia deberían tener todos los elementos bajo él, pero en la regla de h1 hacemos que el color vuelva al valor por defecto.

12.4 La palabra clave unset

La palabra clave unset combina dos comportamientos.

• Si la propiedad es heredable, unset se comporta como: inherit
• Si la propiedad no es heredable, se comporta como initial

p {
    color: unset;
    margin: unset;
}

En el anterior ejemplo tenemos las dos maneras de comportarse:

• Como color es una propiedad heredable, unset hará que se utilice el valor heredado.
• Para margin se utilizará el valor por defecto.

12.5 La palabra clave revert

La palabra clave revert permite volver al valor que habría tenido la propiedad utilizando las reglas de origen anteriores, en lugar de continuar aplicando la declaración actual.

Su funcionamiento está relacionado con la cascada y con los diferentes orígenes de las reglas CSS.

Aunque puede resultar útil en determinados casos, de momento no la usaremos, aunque es conveniente ver un ejemplo en MDN.

13.1 La cascada no significa “gana la última regla”

El orden de aparición es solamente uno de los criterios utilizados por la cascada, por lo que hay que tener cuidado y no creer que la última regla siempre va a ser la correcta.

Hay que recordar que la regla que se aplica es la que mayor especificidad tenga.

13.2 Las tres ideas fundamentales

Para comprender la cascada es necesario distinguir los conceptos que hemos visto previamente:

• Especificidad: Determina qué selector tiene mayor prioridad cuando varias reglas coinciden con un elemento.
• Herencia: Permite que determinadas propiedades pasen de los elementos padres a sus descendientes.
• Cascada: Determina qué declaración termina utilizándose cuando existen varias declaraciones posibles.

13.3 Origen de las hojas de estilo

Las reglas CSS pueden proceder de diferentes lugares. De forma simplificada, podemos distinguir:

• Hojas de estilo del navegador.
• Hojas de estilo proporcionadas por el usuario.
• Hojas de estilo del autor de la página.

En el desarrollo habitual de páginas web trabajaremos principalmente con los estilos del autor, es decir, los CSS que escribimos nosotros.

13.3.1 Estilos del navegador

Los navegadores incluyen una hoja de estilos predeterminada conocida habitualmente como user-agent stylesheet. Cuando creamos nuestro HTML, al añadir algún elemento ya tiene un estilo propio de tamaño, color, tipo de letra, grosor, márgenes…

Estos estilos no los hemos escrito nosotros, proceden de las reglas predeterminadas del navegador, que suelen proporcionar estilos predeterminados para las siguientes etiquetas: <h1>, <p>, <a>, <ul>, <button>, <input>, entre muchos otros elementos.

Por este motivo, una página HTML puede tener un aspecto visual incluso cuando no hemos escrito ninguna hoja de estilos.

Tal como se puede ver, existen diferencias claras en el botón, pero también en dónde se dibuja el bullet de la lista, separación entre elementos, y más sutilmente el subrayado del enlace.

Esto siempre ha sido un problema, y más antiguamente cuando algunos navegadores no gestionaba bien el estándar, sobre todo en la gestión de los parámetros de cajas. Por eso existen ficheros reset.css para resetear los estilos predeterminados. Los frameworks CSS como Bootstrap o TailWind también hacen esta operación antes de aplicar sus estilos.

13.4 Controlar el sistema de cascada

CSS ha evolucionado y actualmente existen mecanismos adicionales para controlar la cascada. Uno de ellos son las capas de cascada, mediante @layer.

Las capas permiten organizar las reglas CSS en diferentes niveles de prioridad y posteriormente colocar las reglas dentro de cada capa. Esto resulta especialmente útil en proyectos grandes, donde diferentes partes del CSS pueden proceder de distintas bibliotecas o módulos.

@layer main {
    p {
        color: blue;
    }
}

@layer componentes {
    p {
        color: red;
    }
}

En el ejemplo anterior la capa “componentes” es más prioritaria que “main” por estar declarada después, por lo tanto el color del texto será rojo. También podemos especificar el orden de las capas sin importar después el orden de la declaración.

@layer componentes, main;

@layer componentes;
@layer main;

Ahora la capa “main” es más prioritaria (por añadirlo después en la declaración), y por tanto sus estilos son los que se aplican a misma especificidad.

13.5 Especificidad frente a orden

Teniendo en cuenta todo lo visto hasta ahora, las reglas que más prioridad tienen es por la especificidad, pero a misma especificidad quien gana es la regla que se declara última, siempre y cuando no haya de por medio una especificación de layers, que puede alterar el orden.

13.6 Diferencia entre herencia y cascada

La herencia y la cascada son conceptos relacionados, pero no son lo mismo. La herencia permite que determinadas propiedades pasen de un elemento padre a sus descendientes.

La cascada, en cambio, determina qué declaración CSS tiene prioridad cuando existen varias declaraciones que pueden aplicarse, y por tanto habrá que medir con la especificidad cuál gana.

Podemos resumirlo de esta manera:

14.1 Unidades absolutas

Las principales unidades absolutas son:

En el desarrollo web habitual, px es con diferencia la unidad absoluta más utilizada.

@media print {
    .pagina { /* A4 */
        width: 21cm;
        min-height: 29.7cm;
    }
}

14.2 Unidades relativas

Las unidades de longitud relativas especifican una longitud en relación con otra propiedad de longitud. Las unidades de longitud relativas se adaptan mejor a diferentes medios de renderizado.

Las medidas vw, vh, vmin y vmax tienen en cuenta la ventana del navegador. Si la ventana fuese 50cm de ancho entonces 1vw = 0.5cm.

p {
    font-size: 20px;
    margin: 2em;
}

body {
    font-size: 16px;
}
h1 {
    font-size: 2em;
}

<div>
    Texto
    <div>
        Texto interior
    </div>
</div>

body {
    font-size: 16px;
}
div {
    font-size: 1.5em;
}

<h1>Título 1</h1>
<div>
    <h1>Título 2</h1>
</div>

html {
    font-size: 16px;
}
div {
    font-size: 2rem;
}
h1 {
    font-size: 2rem;
}

html  { font-size: 16px; }
h1    { font-size: 2rem; }
h2    { font-size: 1.5rem; }
p     { font-size: 1rem; }
small { font-size: 0.875rem; }

p {
    max-width: 60ch;
}

.elemento {
    height: 5ex;
}

<div class="contenedor">
    <div class="caja"></div>
</div>

.contenedor {
    width: 800px;
}

.caja {
    width: 50%;
}

.caja {
    padding: 10%;
}

.elemento {
    width: 100vw;
    height: 100vh;
}

14.3 Unidades para ángulos

CSS también utiliza unidades para representar ángulos. Las principales son:

• deg: grados.
• rad: radianes.
• grad: grados centesimales.
• turn: vueltas.

.elemento {
    transform: rotate(45deg);
}

.elemento {
    transform: rotate(0.5turn);
}

En la siguiente tabla se ven varios ejemplos y sus equivalencias de la documentación de MDN.

Rotación	Equivalencias
	90deg = 100grad = 0.25turn ≈ 1.5708rad
	180deg = 200grad = 0.5turn ≈ 3.1416rad
	-90deg = -100grad = -0.25turn ≈ -1.5708rad

14.4 Unidades de tiempo

Algunas propiedades CSS utilizan unidades de tiempo. Estas unidades se utilizarán especialmente cuando estudiemos transiciones y animaciones CSS. Las principales son:

• s: segundos.
• ms: milisegundos.

.boton {
  transition: background-color 0.3s;
}

.boton {
  transition: background-color 300ms;
}

Ambos valores representan la misma duración.

14.5 Valores sin unidad

Algunas propiedades CSS aceptan números sin unidad.

.elemento {
    opacity: 0.5;
}

.elemento {
    line-height: 1.5;
}

En estos ejemplos no es necesario poner unidad ya que:

• opacity: utiliza un número comprendido normalmente entre 0 y 1.
• line-height: es una propiedad que puede aceptar no tener unidad.

14.6 El valor 0

En muchas propiedades CSS, cuando el valor es cero, la unidad puede omitirse.

.elemento {
    margin: 0;
    padding: 0;
    border-width: 0;
}

En estos casos no hace falta poner ninguna unidad por haber puesto cero, mientras que si fuese otra cantidad sí habría que poner px, em o cualquier otra.

14.7 Medidas calculadas automáticamente

En CSS moderno, por la aparición de móviles y tablets hizo que el diseño responsive se haya vuelto imprescindible, y por tanto el hacer uso de medidas relativas es imprescindible. A eso se le suma el poder realizar cálculos automáticos de medidas.

.caja {
    width: calc(100% - 40px);
}

.caja {
    width: min(90%, 1000px);
}

.caja {
    width: max(300px, 50%);
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

15.1 Cómo especificar colores

A la hora de asignar colores podemos elegir de distintas maneras cómo indicar el color:

15.1.2 Colores mediante valores hexadecimales

Una de las formas más utilizadas para definir colores en CSS es mediante valores hexadecimales. Un color hexadecimal comienza con el símbolo # y normalmente está formado por seis caracteres:

Color en hexadecimal

p { color: #ff0000; }

Los seis caracteres representan los componentes:

• Rojo (R).
• Verde (G).
• Azul (B).

Por este motivo, este sistema recibe el nombre RGB hexadecimal, y se representa como #RRGGBB. Cada componente puede tener un valor entre 00 y FF. Las letras hexadecimales también se pueden escribir en minúsculas.

Con este sistema tenemos una “profundidad” de 24 bits de colores (8 bits por canal), lo que da una variedad de 16.777.216 colores.

De esta manera, a modo de ejemplos sencillos tenemos:

• #000000: negro, por ausencia de color.
• #FF0000: rojo
• #00FF00: verde
• #0000FF: azul
• #FFFFFF: blanco, todos los colores juntos

Cuando los pares de cada componente están formados por dos caracteres iguales, podemos utilizar una forma abreviada de tres caracteres. Por lo tanto, los siguientes ejemplos son equivalentes:

• #FF0000 es igual a #F00
• #112233 es igual a #123
• #00FFAA es igual a #0FA

p {
    color: rgb(255 0 0);
    background-color: rgb(30% 20% 50% );
}

15.1.4 Colores con HSL

CSS también permite definir colores utilizando el modelo HSL. HSL significa:

• Hue: tono/matiz.
• Saturation: saturación.
• Lightness: luminosidad.

CSS permite utilizarlo mediante la función hsl(). En el siguiente ejemplo se muestra el color rojo:

Color en hexadecimal

p { color: hsl(0 100% 50%); }

HSL representa los valores como un cilindro. El primer valor representa el tono y se expresa mediante un ángulo. Por ejemplo:

• 0°: rojo
• 60º: amarillo
• 120°: verde
• 180º: cyan
• 240°: azul
• 300º: magenta
• 360º: rojo de nuevo, por dar la vuelta completa al círculo.

La saturación y la luminosidad se expresan mediante porcentaje.

Cuando la saturación tiene un valor del 100% es más intenso que cuando el mismo tiene 50%. Cuando la luminosidad es menor, obtenemos un color más oscuro, y si ponemos 0% será negro.

HSL puede resultar especialmente cómodo cuando necesitamos crear variaciones de un mismo color. En el siguiente ejemplo, jugando con la luminosidad obtendremos 3 variaciones del mismo color:

Variación de luminosidad con HSL

.color-base {
    color: hsl(210 80% 50%);
}
.color-claro {
    color: hsl(210 80% 70%);
}
.color-oscuro {
    color: hsl(210 80% 30%);
}

h1{
    background-color: rgb(0 0 255 / 50%);
}
h2{
    background-color: hsl(240 100% 50% / 0.5);
}
h3{
    background-color: #FF00007F;
}

h1{
    background-color: transparent;
}

15.2 Qué sistema utilizar

Aunque pueda parecer una respuesta ambigua, depende del proyecto y de la tecnología final que estemos utilizando, ya que esto también afecta.

Cuando usamos el sistema hexadecimal o la función rgb() estamos trabajando bajo el espacio de color denominado sRGB. Este sistema, tal como se ha dicho previamente, hace uso de 24bits (8 por canal), que hace un total de 16.777.216 colores.

En cambio, al usar hsl() no se limita a esos 8 bits por canal, y si nuestro navegador/sistema/pantalla hace uso de otra profundidad de color, podríamos estar usándola.

A medida que avanza la tecnología necesitamos nuevas maneras de representar colores, ya que el espacio de colores se amplía, como 10 bit de color por canal, HDR, …

15.3 Colores y diseño de interfaces

En una interfaz normalmente no utilizaremos colores de manera aislada, ya que lo habitual definir una pequeña paleta. Por ejemplo:

• Color principal
• Color secundario
• Color de fondo
• Color de texto
• Color de texto secundario
• Color de éxito
• Color de error
• Color de advertencia

Posteriormente, cuando estudiemos las variables CSS, podremos centralizar estos valores.

16.1 Color de fondo

La propiedad background-color permite establecer el color de fondo de un elemento. Podemos utilizar cualquiera de los formatos de color estudiados anteriormente:

body {background-color: #d0d0d0}
.div1 { background-color: #2563eb }
.div2 { background-color: rgb(37, 235, 212) }
.div3 { background-color: hsl(262 83% 53% / 0.5) }

Esta propiedad se la podemos asignar a cualquier elemento, incluso al fondo del documento en body tal como se ve en el ejemplo.

16.2 Imágenes de fondo

La propiedad background-image permite utilizar una imagen como fondo.

div { background-image: url("fondo.jpg"); }

La función url() indica la dirección de la imagen. La ruta puede ser relativa al archivo CSS o absoluta, dependiendo de cómo esté organizada la aplicación. Si queremos que sea ruta relativa, imaginando la siguiente estructura de ficheros:

proyecto/
├── css/
│   └── estilos.css
└── img/
    └── fondo.jpg

Para cargar la imagen desde estilos.css usaremos la siguiente ruta: url("../img/fondo.jpg").

Podemos hacer uso de background-image junto con background-color, pero el color sólo funcionará en caso de que la imagen no esté disponible.

16.2.1 background-repeat

Una imagen de fondo puede repetirse para cubrir todo el espacio disponible. Podemos controlar este comportamiento mediante background-repeat, cuyos valores principales, entre otros, son:

• repeat: permite repetir la imagen tanto horizontal como verticalmente. Este es el comportamiento predeterminado de una imagen de fondo. Es especialmente útil cuando utilizamos imágenes pequeñas que forman patrones.
• repeat-x: la imagen se repite horizontalmente.
• repeat-y: la imagen se repite verticalmente.
• no-repeat: para que la imagen no se repita, lo ideal para cuando queremos añadir sólo una fotografía de fondo.
• space: se repite la imagen sin hacer cortes. Se pone la primera imagen al principio del elemento, y al final, y en medio se van añadiendo repeticiones, dejando huecos libres.

Las siguientes imágenes son del ejemplo de MDN.

04c

Comprueba la diferencia de los distintos parámetros de background-repeat.

<div id="example1">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum  ...</p>
</div>

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
#example1 p {
    width:60%;
}

16.3 Otras propiedades de fondo

Existen otras propiedades que tienen que ver con el fondo, por lo que es recomendable ver la documentación para cada una de ellas para conocer sus opciones.

• background-position: permite controlar la posición de una imagen de fondo, usando los siguientes valores:
  • Palabras clave, pudiendo combinarlos: left, center, right, top, o bottom.
  • Porcentajes con dos posiciones, posición desde la izquierda y desde arriba.
  • También se pueden usar posiciones como px y em.
• background-size: permite controlar el tamaño de la imagen de fondo.
  • Si ponemos una única dimensión será el ancho y mantendrá la proporción. Si añadimos una segunda será la altura.
  • Si ponemos la palabra reservada cover cubrirá todo el elemento, pero si la proporción no coincide, parte de la imagen puede quedar fuera de la zona visible.
  • Si ponemos la palabra reservada contain la imagen se escala para que pueda verse completamente dentro del elemento, pero dejará espacio libre.
• background-attachment: permite controlar el comportamiento del fondo cuando hacemos scroll. Permite los siguientes valores:
  • scroll, el comportamiento normal
  • fixed: En este caso, el fondo puede permanecer fijo mientras desplazamos el contenido.
• background-origin: permite determinar desde qué zona de la caja se posiciona la imagen de fondo. Los valores son border-box, padding-box o content-box.

.a {background-position: top left;}
.b {background-position: 10% 50%;}
.c {background-position: 10em 50px;}
.d {background-size: 300px;}
.e {background-size: cover;}
.f {background-size: contain;}

16.4 Degradados

CSS permite crear degradados sin necesidad de utilizar una imagen externa. Los degradados son generados por el navegador, lo que permite crear fondos visualmente complejos sin necesidad de descargar una imagen.

Existen distintas formas a la hora de crear degradados:

• linear-gradient(): crea un degradado lineal. Se puede indicar la dirección como primer parámetro:
  • to right: el degradado va de izquierda a derecha.
  • to bottom: de arriba hacia abajo.
  • Se puede indicar más de dos colores, y el navegador hará transiciones entre ellos. Aparte de indicar la posición de cada uno de ellos.
• radial-gradient(): crea un degradado que parte desde un punto central y se extiende hacia fuera.
• conic-gradient: genera un degradado alrededor de un punto central en forma cónica

.a { background: linear-gradient(red, orange); }
.b { background: linear-gradient(to right, red, orange, yellow); }
.c { background: linear-gradient(45deg, red 25%, yellow 50%, blue 100% ); }
.d { background: linear-gradient( to right, red 0%, yellow 50%, blue 100% ); }
.e { background: radial-gradient(circle, white, blue); }
.f { background: conic-gradient(red, orange, yellow, green, blue, purple, red); }

.a {
    background-image:
        linear-gradient(
            rgb(0 0 0 / 50%),
            rgb(0 0 0 / 50%)
        ),
        url("paisaje.jpg");
}

16.5 La propiedad abreviada background

Hemos visto cómo crear o añadir fondos con propiedades específicas, pero a la propiedad background se le pueden añadir todos los atributos vistos previamente en el siguiente orden:

.caja {
    background:
        #222
        url("imagen.jpg")
        no-repeat
        center
        / cover;
}

Con esta única propiedad hemos establecido el color de fondo, una imagen, la repetición, la posición y el tamaño. La propiedad abreviada puede resultar muy útil, pero al principio puede ser más sencillo utilizar las propiedades individuales.

Box Model y dimensiones

17.1 Áreas de una caja

Tal como se ha dicho, cada elemento en HTML es interpretada como una caja rectangular, que a su vez cuenta con cuatro áreas distintas:

1. Contenido (content): Contenido del elemento.
2. Relleno (padding): Espacio interior.
3. Borde (border): Borde visible.
4. Margen (margin): Espacio exterior para separar esta caja de otras vecinas.

El tamaño de la caja es calculado por el navegador teniendo en cuenta el espacio de todas ellas. En las siguientes imágenes se pueden apreciar mejor:

Desde las herramientas del desarrollador de nuestro navegador podemos ver el box model y el tamaño que ocupa cada elemento de una página.

Este modelo constituye la base del diseño en CSS y es imprescindible entenderlo antes de ver apartados más complejos.

17.2 Tamaño de la caja y box-sizing

Supongamos que tenemos la siguiente caja:

.caja {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Aunque todavía no hayamos visto las propiedades en profundidad, pero teniendo en cuenta el modelo de caja visto anteriormente:

En el ejemplo anterior la anchura de la caja es de 300+20+20+5+5=350px, ya que hay que sumar la anchura establecida, más el padding a cada lado y la anchura del borde, también a cada lado. El margen no entra en el cómputo del tamaño, al ser separación entre elementos. Este comportamiento puede resultar extraño al principio.

La propiedad box-sizing permite modificar cómo se calculan las dimensiones. Existen dos valores principales:

• content-box: es el comportamiento tradicional. La anchura corresponde al contenido. Este es el comportamiento por defecto.
• border-box: el ancho incluye el padding y el borde. Este comportamiento resulta más intuitivo.

En las siguientes imágenes se puede apreciar mejor la diferencia en el cálculo de la dimensión real de la caja:

Tal como se puede ver, cuando la opción es content-box el tamaño es el establecido en width, y después se añade los tamaños restantes. En cambio, cuando es border-box, las herramientas del desarrollador muestran cómo al tamaño del contenido se le ha restado el tamaño del padding y el border para que coincida con el total de width

*,
*::before,
*::after {
    box-sizing: border-box;
}

17.3 Elementos de bloque y elementos en línea

El modelo de caja afecta a todos los elementos, aunque no todos se comportan igual. Los elementos pueden ser de bloque o elementos en línea, pero nunca los dos a la vez.

18.1 Dimensiones por zona

A continuación vamos a ver distintas propiedades para modificar las dimensiones de las cajas del box model de HTML. Las propiedades se pueden diferenciar entre:

• Propiedad general: el nombre no indica a qué zona afecta, y por tanto modificará todas las áreas.
• Propiedad específica: indica qué zona va a modificar, y sólo afectará a esa zona.

.caja {
    padding: 30px;
}

.a { padding: 2px; }
.b { padding: 2px 4px; }
.c { padding: 2px 4px 6px; }
.d { padding: 1px 2px 3px 4px;}

18.2 La propiedad width

La propiedad width establece el ancho del área de contenido de un elemento.

.caja {
    width: 300px;
}

El contenido tendrá un ancho de 300px. Es importante recordar que, por defecto, el padding y el border no están incluidos dentro de ese ancho. Este comportamiento se estudiará más adelante con box-sizing.

.contenedor { width: 80%; }

18.3 Propiedad min-width

La propiedad min-width establece el ancho mínimo que puede tener un elemento.

.caja {
    width: 50%;
    min-width: 250px;
}

El elemento intentará ocupar el 50% pero nunca será inferior a 250px. Esta propiedad resulta muy útil en diseños responsive.

18.4 Propiedad max-width

max-width establece el ancho máximo permitido.

.caja {
    width: 90%;
    max-width: 1200px;
}

Este patrón es extremadamente habitual. Por defecto, en pantallas pequeñas ocupará el 90%, mientras que en pantallas grandes nunca superará los 1200px. De esta forma evitamos que el contenido resulte excesivamente ancho.

18.5 La propiedad height

height define la altura del área de contenido.

.caja { height: 200px; }

El contenido dispondrá de una altura de 200px. Si el contenido ocupa más espacio del disponible, puede producirse un desbordamiento, que estudiaremos en el siguiente apartado.

Un porcentaje en height solo funciona correctamente cuando el elemento padre tiene una altura definida. Si el elemento padre no tiene altura definida, el porcentaje puede no producir el resultado esperado.

18.6 Propiedad min-height

La propiedad min-height establece una altura mínima.

.caja { min-height: 200px; }

Aunque el contenido sea muy pequeño, la caja tendrá al menos 200px de altura. Si el contenido crece, el elemento también crecerá.

18.7 Propiedad max-height

max-height limita la altura máxima.

.caja { max-height: 400px; }

Si el contenido supera ese tamaño, podrá producirse un desbordamiento dependiendo de la propiedad overflow. Esta combinación es muy frecuente en paneles laterales y listas con desplazamiento.

19.1 Control independiente de cada eje

A la hora de controlar el desbordamiento, podemos controlarlo de manera separada para el eje horizontal y el vertical. Para ello están las propiedades

• overflow-x: para el eje horizontal.
• overflow-y: para el eje vertical.

20.1 Uso de padding en botones

Uno de los usos más habituales del padding es aumentar el área de pulsación de un botón. Aunque el texto sea pequeño, el botón tendrá una superficie mucho más cómoda para el usuario. Este patrón aparece prácticamente en cualquier interfaz moderna.

21.1 La propiedad border

La forma más sencilla de crear un borde consiste en utilizar la propiedad abreviada border, a la que se le pasan tres parámetros:

• Grosor del borde: Se puede añadir con una unidad de medida o con palabras clave como thin, medium, thick.
• Estilo de línea: hay distintas palabras claves que indican el tipo de borde:
  • none: Sin borde.
  • solid: Línea continua.
  • dashed: Línea discontinua.
  • dotted: Línea de puntos.
  • double: Línea doble.
  • groove: Efecto tridimensional hundido.
  • ridge: Efecto tridimensional elevado.
  • inset: Aspecto interior.
  • outset: Aspecto exterior.
• Color del borde.

En el siguiente ejemplo se puede ver el código en una única propiedad o separado cada parámetro en su propiedad:

p { 
    border: 2px solid black;
}

p {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

La propiedad border-width es una propiedad “general” que acepta de uno a cuatro parámetros para las distintas zonas, tal como se ha explicado anteriormente.

21.2 Bordes diferentes en cada lado

CSS permite configurar cada lado del borde de forma independiente con las propiedades border-top, border-right, border-bottom y border-left.

Funcionan igual que border, por lo que podemos asignar a cada lado un grosor, estilo y color distintos.

Y si queremos asignar cada característica concreta por separado, tenemos propiedades separadas como:

• border-top-width
• border-right-style
• border-bottom-color

Y así para cada lado de la caja y propiedad.

21.3 Bordes redondeados con border-radius

Una de las propiedades más utilizadas es border-radius, que permite redondear las esquinas.

.a { border-radius: 5px; }
.b { border-radius: 1rem; }
.c { border-radius: 50%; }

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

Cada esquina puede configurarse de forma independiente a través de las propiedades específicas:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

21.4 Bordes elípticos

border-radius también permite definir radios horizontales y verticales diferentes.

.caja {
    border-radius: 50px / 20px;
}

Esto genera esquinas con forma elíptica en lugar de circular. Aunque es una característica interesante, en la mayoría de los diseños se utilizan radios iguales. Para entender bien los bordes elípticos podemos ver cómo funcionan en la web border-radius generator de MDN.

22.1 margin: auto

El valor especial auto permite que el navegador calcule automáticamente el margen. El caso más conocido es el centrado horizontal.

.caja {
    margin: auto;
}

Es importante darse cuenta que si sólo indicamos auto desaparece automáticamente el margen superior e inferior

22.2 Márgenes y fondo

Una característica importante es que el color de fondo no se extiende al margen.

Por ejemplo:

.caja {
    margin: 20px;
    background-color: lightblue;
    border: 1px solid black;
}

El color azul solo ocupa hasta llegar al borde. Todo lo que va después, que es el margen, no tendrá ese color de fondo.

22.3 Colapso de márgenes

Una característica exclusiva de los márgenes verticales es el colapso de márgenes (margin collapsing).

La lógica supondría pensar en 50px, pero no, ya que los márgenes verticales adyacentes colapsan y se utiliza el mayor de ellos, en este caso, 30px. En la documentación se explican todos los casos.

También hay que tener en cuenta el colapso no se produce en todos los casos. Por ejemplo:

• Márgenes horizontales.
• Elementos Flexbox.
• Elementos Grid.
• Elementos con posicionamiento especial.
• Elementos separados por padding o borde.

Por ello, en diseños modernos basados en Flexbox o Grid este comportamiento aparece con mucha menos frecuencia.

Variables, funciones y organización

23.1 Cómo crear una variable en CSS

Una variable CSS es una propiedad cuyo nombre comienza por dos guiones (--), para después poder usarla con la función var() indicando el nombre dado previamente. La razón de que las variables empiecen por -- es para distinguir las propiedades personalizadas de las estándar de CSS.

:root {
  /* COLORES */
  --color-main: #2563eb;
  --color-ok: #16a34a;
  --color-error: #dc2626;
  --color-text: #222222;
  /* ESPACIO */
  --espacio-md: 1rem;
  /* BORDES */
  --bordes: 2px;
  --radio: 10px;
}

h1 {
    color: var(--color-main);
}
a {
    color: var(--color-main);
}
.ok {
    border: var(--bordes) solid var(--color-ok);
    border-radius: var(--radio);
    padding: var(--espacio-md);
}

Lo más habitual es declarar las variables dentro del selector :root, de esta manera las variables estarán disponibles en toda la página. Por este motivo, suele utilizarse como lugar donde se almacena la configuración global del diseño.

Las variables se pueden usar tantas veces como sea necesario, y si en el futuro se quieren realizar modificaciones, sólo es necesario cambiarlo en la declaración, y eso hará que toda la página cambie.

Tal como se puede ver en el ejemplo, en las variables se pueden usar no sólo para colores, sino también para espaciados e incluso tipografías.

23.2 Variables locales y herencia

En el apartado anterior hemos visto cómo crear variables “globales”, ya que se han definido en :root, pero podemos crear variables locales a un elemento. Hay que tener en cuenta que las variables CSS se heredan, por lo que si definimos una variable en un elemento, sus hijos podrán utilizarla.

.tarjeta {
    --color-local: blue;
}

.tarjeta p {
    color: var(--color-local);
}

La variable únicamente existe dentro de .tarjeta y de sus elementos descendientes. Esto permite crear componentes con configuraciones propias.

Es importante que al crear variables locales, cada componente puede definir otra variable con el mismo nombre, y por tanto serán definiciones distintas, ya que cada componente mantiene su propio contexto:

.alerta {
    --color: #dc2626;

    color: var(--color);
    border: 2px solid var(--color);
}

.exito {
    --color: #16a34a;

    color: var(--color);
}

23.3 Reasignación de variables para reutilización

Podemos hacer componentes genéricos y después crear variantes sólo modificando el valor de una variable, de esta manera no tenemos que repetir todas las propiedades.

.boton {
  --color-boton: #2563eb;
  background: var(--color-boton);
  border: 2px solid var(--color-boton);
  color: white;
}

.boton-rojo {
    --color-boton: #dc2626;
}

.boton-verde {
    --color-boton: #16a34a;
}

Después, en el HTML el componente tendrá las clases que necesitemos.

23.4 Valores por defecto con var()

La función var() admite un segundo parámetro que actúa como valor de respaldo. Si la primera variable no existe, utilizará el segundo valor.

color: var(--color-texto, black);

Este mecanismo resulta útil cuando desarrollamos componentes reutilizables.

23.5 Variables y modo oscuro

Una de las grandes ventajas de las variables CSS es la creación de temas. Hoy en día es habitual que las webs cuenten con un modo claro y un modo oscuro.

/* tema claro*/
:root {
    --fondo: white;
    --texto: #222;
}
/* tema oscuro */
body.dark {
    --fondo: #111;
    --texto: #eee;
}

body {
    background: var(--fondo);
    color: var(--texto);
}

Al cambiar la clase del <body>, toda la interfaz cambia automáticamente.

23.6 Variables y calc()

Las variables pueden combinarse con funciones CSS, de esta manera el navegador realiza el cálculo automáticamente.

:root {
    --espacio: 1rem;
}