CSS. Unidad 3. Aplicando estilos a los enlaces.

Introducción

A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en esta unidad.

Los estados de un enlace

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

  • Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
  • Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.
  • Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.
  • Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.
  • Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.

Enlaces predeterminados

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el código CSS simplemente amplía y centra el texto para que destaque más):

p {
  font-size: 2rem;
  text-align: center;
}
<p><a href="https://fernandoruizrico.com">Un enlace simple</a></p>

Un enlace simple

A medida que vayas observando los estilos predeterminados, te darás cuenta de algunas cosas:

  • Los enlaces están subrayados.
  • Los enlaces no visitados se ven de color azul.
  • Los enlaces visitados se ven de color morado.
  • Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
  • Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
  • Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).

Ejercicio propuesto: Enlaces más grandes y centrados

Crea una página web con al menos 5 párrafos, cada uno con un enlace diferente a cualquier sitio que te guste. También tienes que estilizar tu página de modo que los enlaces sean el doble del tamaño del resto del texto y estén alineados en el centro, tal como se muestra en el ejemplo anterior.

No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste.

A tener en cuenta…

Curiosamente, los estilos predeterminados son casi los mismos que utilizaban los primeros navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:

  • Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
  • Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.

Los estilos por defecto se pueden cambiar usando las siguientes propiedades CSS:

  • color para cambiar el color del texto.
  • cursor para cambiar el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
  • outline para cambiar el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.

Aplicando formato a los enlaces

Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos que podemos aplicar a nuestros enlaces.

Para empezar, escribiremos nuestro conjunto de reglas vacío:

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVFears HAte.

Ahora vamos a añadir algo más de información para darles formato:

p {
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
}

a:link {
  color: green;
}

a:visited {
  color: olive;
}

a:focus {
  background: orange;
}

a:hover {
  background: yellow;
  text-decoration: underline orange wavy;
}

a:active {
  background: orange;
  text-decoration: underline red wavy;
}

Analicemos el efecto que tendrá el código anterior:

  • Utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados respectivamente, para que sean diferentes respecto a los colores por defecto.
  • Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado diferente para que el enlace destaque aún más.
  • Finalmente, a:active se usa para dar a los enlaces también un esquema de color diferente cuando hacemos clic sobre ellos, para dejar aún más claro que el navegador saltará a una nueva página.

Y para finalizar mostramos un ejemplo de código HTML en el que podemos aplicar el código CSS que hemos sugerido:

<p>
  Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Al utilizar el código HTML junto con el código CSS observamos el siguiente resultado:

Ejercicio propuesto: Aplicando estilos y subrayados

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos. Debes cambiar los colores y subrayados por defecto para que cada posible estado (enlace, visitado, en foco, al pasar el ratón, activo) tenga un color diferente al predeterminado, y también otro subrayado, de forma similar a como hicimos en el ejemplo anterior, donde utilizamos por ejemplo el subrayado rojo ondulado.

Como has visto, puedes cambiar el color del texto utilizando la propiedad color, y el color de fondo utilizando la propiedad background. Puedes echar un vistazo a los diferentes colores aquí. Acerca de la decoración del texto, recuerda que se puede cambiar fácilmente con la propiedad text-decoration.

Incluyendo iconos en los enlaces

Una práctica común es incluir iconos en los enlaces. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este ejemplo de icons8.com.

Podemos usar el mismo código HTML que en el ejemplo anterior:

<p>
   Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Y ajustaremos el código CSS para incluir el icono en todos los enlaces:

a {
  background: url('https://live.mdnplay.dev/es/docs/Learn/CSS/Styling_text/Styling_links/external-link-52.png') no-repeat 100% 0;
  background-size: 2rem;
  padding-right: 2.5rem;
}

Si aplicamos el código CSS al HTML propuesto, obtendremos el siguiente resultado:

Utilizamos la propiedad abreviada background  y establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.

También usamos background-size para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo).

Finalmente, establecemos un área de relleno a la derecha (padding-right) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.

Proposed exercise: Links with icons

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos (puedes usar el código que escribiste anteriormente) e incluye un icono al final de cada uno. También cambia algunos otros estilos como el color del texto o la decoración del texto.

Dar aspecto de botón a un enlace

Las propiedades CSS que hemos utilizado hasta ahora en esta unidad también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.

Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias. Por ejemplo, el menú de navegación de un sitio web generalmente es una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones o pestañas que proporcionan al usuario acceso a otras partes de la página web. Vamos a ver cómo.

En primer lugar, partiremos del siguiente código HTML:

<ul class="navbar">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Noticias</a></li>
  <li><a href="#">Sobre nosotros</a></li>
  <li><a href="#">Contactar</a></li>
</ul>

Y sobre ese código HTML aplicamos el siguiente código CSS:

/* Clase general para la barra de navegación */
.navbar {
  font-size: 1.25rem;
  font-family: sans-serif;
  text-align: center;
  background: yellow;
}

/* Selecciona sólo los elementos de lista (li) que se encuentran dentro de la barra de navegación */
ul.navbar li {
  display: inline;
}

/* Selecciona sólo los enlaces (a) que se encuentran dentro de la barra de navegación */
ul.navbar a {
  text-decoration: none;
  display: inline-block;
  padding: 1rem;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando el ratón pase por encima (a:hover) */
ul.navbar a:hover {     
  background: orange;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando hagamos click sobre ellos con el ratón (a:active) */
ul.navbar a:active {
  color: white;
  background: red;
}

Este código nos proporciona el siguiente resultado:

Expliquemos qué está pasando aquí, centrándonos en las partes más interesantes:

  • Una nueva clase para la lista:
    • Hemos creado la clase navbar para que solo los elementos dentro de esa clase tengan el estilo de una barra de navegación.
    • ul.navbar: Al poner esto antes de cualquier selector, las propiedades CSS entre llaves se aplicarán solo a los elementos dentro de una lista no ordenada con clase navbar.
  • Los estilos relacionados con el elemento <ul>:
    • Cambiamos la propiedad font-size para agrandar un poco el texto.
    • Cambiamos la propiedad font-family para que sea diferente al resto del texto.
    • Cambiamos la propiedad text-align para que los enlaces queden centrados.
    • Cambiamos la propiedad background a color amarillo.
    • Los elementos <li> normalmente se comportarán como elementos de bloque (se asientan en sus propias líneas). En este caso, queremos crear una lista horizontal de enlaces, por lo que configuramos la  propiedad display, lo que hace que los elementos de la lista se encuentren en la misma línea uno tras otro (ahora se comportan como elementos en línea).
  • Los estilos relacionados con los elementos <a>:
    • Comenzamos desactivando los valores por defecto de text-decoration (no queremos que estropeen nuestro aspecto).
    • A continuación, configuramos la propiedad display en bloque en línea (esto permitirá dimensionarlos, como explicaremos en otra unidad).
    • Configuramos el valor del padding en 1rem para darle a los botones algo de espacio alrededor del texto (también explicaremos esto en otra unidad).
    • También cambiamos el color de los elementos cuando el puntero del ratón está sobre ellos y al hacer clic.

Ejercicio propuesto: Barra de navegación

Crea una página web con una barra de navegación con tu propio estilo. Puedes cambiar cualquier propiedad que desees (colores, decoración de texto, tamaño de fuente, familia de fuente, etc.). Después de eso, justo debajo inserta algunos otros enlaces. También puedes intentar usar algunas otras reglas de CSS para dar estilo a estos enlaces, como se muestra a continuación:

Algunos de los navegadores que recomendamos son:

Mozilla Firefox

Google Chrome

Apple Safari

Test

Comprueba tus conocimientos con este test sobre estilos de enlaces de texto.

Felicitación navideña con HTML, CSS y JavaScript

Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.

HTML

  • Estructura Básica: El documento HTML comenzará con la declaración <!DOCTYPE html> y utilizará las etiquetas <html>, <head>, y <body> para estructurar el contenido.
  • Metadatos: Dentro de <head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles.
  • Título: El título de la página será «Felicitación de Navidad».
  • Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
  • Contenido del Cuerpo: Dentro de <body> colocaremos un encabezado <h1> con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos un div con la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados.
  • Elementos de Audio: Incluiremos tres elementos <audio> para reproducir sonidos para interactuar con las imágenes.
  • JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.

CSS

  • Estilos generales: Estableceremos estilos para html y body, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto.
  • Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
  • Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
  • Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.

JavaScript

Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:

  1. Vibración: Generaremos una breve vibración en dispositivos compatibles.
  2. Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
  3. Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.

Imágenes y archivos de audio

A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).

Las imágenes iniciales

Los archivos de audio

Al hacer clic sobre las imágenes (utilizando JavaScript)

Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:

Cómo colocar las imágenes y los audios, y cómo definir las animaciones

Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.

Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:

<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
  ...
</div>

La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:

<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

<div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" controls></audio>
    </div>
</div>
  1. Encabezado <h1>:
    • <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:
      • animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.
      • animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
  2. Div contenedor:
    • <div class="contenedor">: Este div actúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
  3. Bloques con imágenes y audio:
    • Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
      • animate__animated: Establece que se va a definir una animación.
      • animate__lightSpeedInLeft, animate__backInDown, animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.
      • animate__delay-1s, animate__delay-2s, animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
    • Dentro de cada div, hay un sub-div con un id único (img-trineo, img-campana, img-cantando) que contiene una imagen (<img>):
      • src: Indica la ruta del archivo de imagen.
      • alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
    • Después de cada imagen, colocamos un elemento <audio> con un id único para cada uno:
      • src: El archivo de audio a reproducir.
      • controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.

Cómo conseguir una página más interactiva (utilizando JavaScript)

Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:

<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
...
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>

El código fuente completo

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Felicitación de Navidad</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<body>
  <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

  <div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" onclick="anima('campana', 'swing')" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" onplay="anima('campana', 'swing')" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" onclick="anima('cantando', 'heartBeat')" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" onplay="anima('cantando', 'heartBeat')" controls></audio>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
  1. Doctype e idioma: <!DOCTYPE html> indica al navegador que se trata de un documento HTML5. <html lang="es"> especifica que el contenido del documento está en español.
  2. Etiqueta <head>: Contiene metadatos y enlaces a recursos externos.
    • charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.
    • name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.
    • <link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».
    • animate.min.css: es una librería de animaciones CSS.
  3. Etiqueta <body>: Define el contenido principal de la página.
    • <h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.
    • <div class="contenedor">: es un contenedor para las imágenes. Cada <div> hijo tiene un id único y contiene una <img>.
    • Cada imagen tiene clases para animaciones y un evento onclick que llama a la función JavaScript anima().
    • Los elementos <audio> están asociados a cada imagen para reproducir sonidos específicos.

CSS

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;

  font-family: "Mountains of Christmas";
  text-align: center;
  color: #ae2929;
  background-color: #2929ae;
  font-size: 150%;
  text-shadow: 2px 2px 2px black;
}

.contenedor {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

@media (max-width: 900px) {
  .contenedor {
    flex-direction: column;
  }
}

img, audio {
  width: 300px;
  max-width: 100vw;
  margin: 5px; 
  filter: drop-shadow(5px 5px 5px black);
}
  1. Estilos Globales:
    • margin: 0px; padding: 0px; elimina márgenes y rellenos por defecto.
    • width: 100%; establece el ancho del cuerpo y el HTML al 100% del viewport.
    • font-family, text-align, color, background-color, font-size, text-shadow aplican estilos de texto y fondo.
  2. Clase .contenedor:
    • display: flex; activa Flexbox, un método de layout.
    • justify-content: center; centra los elementos hijos horizontalmente.
    • flex-direction: row; coloca los elementos hijos en una fila.
  3. Media Query:
    • @media (max-width: 900px) aplica estilos cuando el ancho de la ventana es menor a 900px, cambiando flex-direction a column para alinear los elementos verticalmente.
  4. Estilo de Imágenes:
    • width: 300px; establece un ancho fijo de las imágenes.
    • max-width: 100vw; establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.
    • filter: drop-shadow(5px 5px 5px black); añade una sombra a las imágenes.

JavaScript

function anima(dibujo, animacion) {
  navigator.vibrate(50);

  document.getElementById(`audio-${dibujo}`).currentTime = 0;
  document.getElementById(`audio-${dibujo}`).play();

  document.getElementById(`img-${dibujo}`).innerHTML =
    `<img src="img/${dibujo}.png" 
     class="animate__animated animate__${animacion}"
     onclick="anima('${dibujo}', '${animacion}')">`;
}
  1. Vibración:
    • navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
  2. Control de Audio:
    • document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic.
    • .currentTime = 0: para que el audio comience a reproducirse desde el principio.
    • .play(): inicia la reproducción del audio.
  3. Actualización de Imagen y Animación:
    • document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.
    • onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar a anima() con los mismos parámetros.

El resultado

Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.

CSS. Unidad 6. Flexbox.

¿Por qué flexbox?

Durante mucho tiempo, las únicas herramientas fiables para crear diseños CSS con una alta compatibilidad entre navegadores, fueron los elementos flotantes y el posicionamiento. Cumplen su propósito, pero tienen una funcionalidad bastante limitada.

Con tales herramientas resulta difícil, si no imposible, lograr obtener un diseño de página sencillo y flexible que cumpla con unos requisitos como los siguientes:

  • Centrar verticalmente un bloque de contenido dentro de su elemento padre.
  • Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
  • Hacer que todos los elementos en una distribución de columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.

Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de distribución de elementos dentro de la página.

Un ejemplo sencillo

En esta unidad te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. En el siguiente ejemplo verás que tenemos un elemento <header> con un encabezado de nivel superior en él, y un elemento <section> que contiene tres elementos <article>. Los usaremos para crear una distribución bastante habitual de tres columnas:

<header>
  <h1>Comunidad Valenciana</h1>
</header>

<section>
  <article>
    <h2>Alicante</h2>
    <p>El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.</p>
  </article>

  <article>
    <h2>Valencia</h2>
    <p>Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.</p>
  </article>

  <article>
    <h2>Castellón</h2>
    <p>La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.</p>
  </article>
</section>
html {
  font-family: sans-serif;
}

body {
   margin: 0;
}

header {
  background: purple;
  height: 75px;
}

h1 {
  text-align: center;
  color: white;
  line-height: 75px;
  margin: 0;
}

article {
  padding: 1%;
  margin: 1%;
  background: aqua;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ejercicio propuesto: Distribución simple de cajas

Usando el código del ejemplo anterior, crea una nueva página web con un contenido similar. Puedes utilizar el texto que quieras y los colores y fuentes que más te gusten.

Especificar qué elementos serán cajas flexibles

Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. En este caso, queremos distribuir los elementos <article>, por lo que lo activaremos la propiedad correspondiente en el elemento <section> (que se convierte en un contenedor flexible):

section {
  display: flex;
}

Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra distribución en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este.

Para dejarlo un poco más claro, vamos a observar detenidamente el resultado. El elemento al que le hemos dado un valor de display de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. También podemos usar un valor de display de inline-flex si queremos que los elementos secundarios de un elemento sean elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.

Ejercicio propuesto: Cajas flexibles

Añade al ejercicio anterior el código CSS necesario para que todo el contenido dentro del elemento <section> se muestre como cajas flexibles (display: flex) que se muestran de izquierda a derecha, todas ellas con la misma altura.

Como hemos explicado antes, solo tienes que añadir tres líneas de código y ¡solucionado! Dispondrás de cajas flexibles:
section {
  display: flex;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

El modelo flexible

Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:

  • El eje principal (main axis) es el eje en el que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio principal (main start) y final principal (main end).
  • El eje transversal (cross axis) es el eje perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio transversal (cross start) y extremo cruzado (cross end).
  • El elemento padre que tiene establecido display: flex (el elemento <section> en nuestro ejemplo) se llama contenedor flexible.
  • Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan elementos flexibles (son los elementos <article> de nuestro ejemplo).

¿Filas o columnas?

A los elementos flexbox les podemos aplicar una propiedad llamada flex-direction que especifica en qué dirección aparece el eje principal, o lo que es lo mismo, en qué dirección estarán dispuestos los elementos hijo de un elemento flexbox. Por defecto, está establecido en el valor row, por lo que se presentan en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).

Ejercicio propuesto: Distribución en una columna

Añade al ejercicio anterior el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna (flex-direction: column), de forma similar a la distribución que teníamos antes de aplicar el código CSS.

Bastará con utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: column;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Orden inverso

También puedes distribuir elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse.

Ejercicio propuesto: Distribución en fila en orden inverso

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en la misma fila, pero en orden inverso (flex-direction: row-reverse).

Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: row-reverse;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ejercicio propuesto: Distribución en columna en orden inverso

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna, pero en orden inverso (flex-direction: column-reverse).

Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
section {
  display: flex;
  flex-direction: column-reverse;
}

Comunidad Valenciana

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Ajustar las columnas al tamaño del contenedor

Un problema que surge cuando tienes una cantidad fija de ancho o alto es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y no se ajustan al diseño de nuestra página. Echa un vistazo al ejemplo de este enlace (donde vemos que los elementos hijo se pueden llegar a salir de su contenedor), o fíjate en el resultado que se observa a continuación, donde el ancho de cada columna es muy reducido:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Establecer el tamaño de cada columna

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> tengan un ancho fijo de 200px.

Una forma de conseguir esto fácilmente es añadir una propiedad más (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño (flex:200px) para ser aplicada al elemento <article>:
section {
  display: flex;
  flex-wrap: wrap;
}
article {
  ...
  flex: 200px;
}

Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.

Ejercicio propuesto: Establecer el número de columnas por fila

Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en dos columnas.

Una forma de conseguir esto fácilmente es utilizar la propiedad correspondiente (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño especificando el porcentaje (flex:48%) para ser aplicada al elemento <article>:
section {
  display: flex;
  flex-wrap: wrap;
}
article {
  ...
  flex: 48%;
}

Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Orden inverso en cada fila

Partiendo del código anterior, cambia el valor de tu propiedad flex-direction a row-reverse. Ahora verás que todavía tienes tu distribución en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés:

section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.

Alcoy

Alcoy es una ciudad industrial y universitaria, ubicada en la provincia de Alicante. El río Serpis cruza el término municipal.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Ejercicio propuesto: Añadir imágenes y sombras

Usando el código del último ejemplo anterior, añade tres ciudades más (para mostrar al menos 9 ciudades en total) y también inserta una imagen por cada una. Añade sombras al texto y a las cajas y también puedes cambiar los colores y el texto a tu gusto.

El resultado podría ser similar al siguiente (con ancho fijo o con porcentaje):

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

The city is notorious for its music festivals, among which we find: the Tanned Tin music festival for alternative music, the Benicàssim’s International Festival, the Arenal Sound and the Rototom Sunsplash Festival, known for its reggae music.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Valencian Community

Alicante

El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.

Valencia

Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.

Castellón

The city is notorious for its music festivals, among which we find: the Tanned Tin music festival for alternative music, the Benicàssim’s International Festival, the Arenal Sound and the Rototom Sunsplash Festival, known for its reggae music.

Benidorm

Ha sido un destino turístico desde que se amplió su puerto y se construyeron los primeros hoteles. Hoy es conocida por sus playas y rascacielos y recibe tantos turistas del exterior como de España.

Alineación horizontal y vertical

También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo (puedes mirar el resultado aquí), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda. Si miramos el código HTML, observaremos que simplemente tenemos 5 botones dentro de un bloque <div>:

<div>
    <button>Smile</button>
    <button>Laugh</button>
    <button>Wink</button>
    <button>Shrug</button>
    <button>Blush</button>
</div>

Si aplicamos algo de código CSS, por ejemplo, utilizando la propiedad align-items podremos controlar dónde se ubican los ejemplos flexibles del eje transversal:

  • Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.
  • El valor center mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal.
  • También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta align-items para conocer todos los detalles al respecto.

Por otro lado, también podemos modificar el valor de la propiedad justify-content  para controlar dónde se ubican los elementos flexibles sobre el eje principal:

  • El valor por defecto es flex-start, que coloca todos los elementos al comienzo del eje principal.
  • Puedes usar flex-end para que se coloquen al final.
  • center también es un valor de justify-content (para alinear contenido), que coloca los elementos flexibles sobre el centro del eje principal.
  • El valor space-around puede resultar muy útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.
  • Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.

Ejercicio propuesto: Alineación vertical y distribución uniforme

Partiendo del código anterior de los cinco botones, cambia el valor de las propiedades align-items  y justify-content como se indica a continuación. Cambia además el tamaño del bloque <div>, la fuente del texto y añade también alguna sombra al elemento <div> y a los botones y actualiza el contenido del navegador para observar el resultado.

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

CSS. Unidad 5. El modelo de cajas.

Introducción

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear unos elementos con otros. En esta unidad echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños más complejos entendiendo cómo funciona y llegando a conocer la terminología relacionada.

¿Qué es el modelo de cajas CSS?

El modelo de cajas CSS define cómo funcionan las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página.

Partes de una caja

Al definir una caja de tipo bloque en CSS tenemos los siguientes elementos:

  • El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
  • El relleno de la caja (o padding box): El relleno es el espacio en blanco alrededor del contenido. Es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
  • El borde de la caja (o border box): El borde de la caja envuelve el contenido y el relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
  • El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde, así como el espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.

El diagrama siguiente muestra estas capas:

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

Observemos por ejemplo la caja que viene definida por el siguiente código CSS, que establece los valores para las propiedades widthheightmarginborder, y padding:

.caja {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

Ejercicio propuesto: Jugando con el modelo de cajas

En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase definida en CSS que establece los valores de las propiedades width, height, margin, border y padding. Utilizando ese código, crea una página web con cinco cajas diferentes, cada una con diferentes estilos. Tienes que cambiar también el color del texto (puedes elegir los colores que más te gusten). Y finalmente añade algunas sombras al texto usando diferentes estilos y colores.

Puedes consultar los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Código CSS:

.caja1 {
  border: 5px solid red;
  background-color: lightgray;
  padding: 10px;
  margin: 25px;
  width: 250px;
  height: 200px;
  ...
}

.caja2 {
  border: 7px solid green;
  background-color: gray;
  padding: 5px;
  margin: 0px;
  width: 300px;
  height: 200px;
  color: white;
  ...
}

...

Código HTML:

<div class="caja1">Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.</div>
<div class="caja2">Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.</div>
...

Y el resultado:

Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.
Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.

Márgenes, relleno y bordes

En el ejemplo anterior ya has visto cómo usar las propiedades marginpadding y border. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.

Vamos a explorar estas propiedades más detalladamente.

Margen

El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

Ejercicio propuesto: Márgenes personalizados

Crea una página web con el ejemplo que tienes a continuación y cambia los valores de los márgenes para ver cómo se desplazan las cajas debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor. Finalmente, añade tres cajas más con cualquier estilo que desees dentro del mismo contenedor.

.contenedor {
  border: 5px solid red; 
}

.caja1 {
  border: 5px solid green;
  margin-top: 10px;
  margin-left: 10px;
  width: 50%;
}

.caja2 {
  border: 5px solid blue;
  margin-top: 10px;
  margin-left: 50px;
  width: 50%;
}

.caja3 {
  border: 5px solid orange;
  margin-top: 10px;
  margin-left: 100px;
  width: 50%;
}
...
<div class="contenedor">
  <div class="caja1">Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor</div>
  <div class="caja2">Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor</div>
  <div class="caja3">Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor</div>
  ...
</div>
Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor
Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor
Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor

Relleno

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.

Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad padding, o para cada lado uno de los lados usando las propiedades equivalentes:

Ejercicio propuesto: Padding personalizado

Si cambias los valores para el relleno de las clases «.caja» del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase «.contenedor», que ampliará el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y aumentará el espacio entre su borde y lo que esté dentro del elemento. Crea una página web con el siguiente código y añade tres cuadros más con diferentes rellenos y estilos.

.caja1 {
  border: 5px solid red;
  margin: 10px;
  ...
}

.caja2 {
  border: 5px solid blue;
  margin: 10px;
  padding: 25px;
  ...
}

.caja3 {
  border: 5px solid green;
  margin: 10px;
  padding: 50px;
  ...
}
...
<div class="caja1">
  Esta es una caja sin relleno
</div>
<div class="caja2">
  Esta es una caja con 25px de relleno
</div>
<div class="caja3">
  Esta es una caja con 50px de relleno
</div>
...
Esta es una caja sin relleno
Esta es una caja con 25px de relleno
Esta es una caja con 50px de relleno

Bordes

El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.

Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

Ejercicio propuesto: Bordes personalizados

En el siguiente ejemplo hemos utilizado varios métodos abreviados y largos para diseñar los bordes. Crea una nueva página web con ese código y combina las diferentes propiedades para comprobar cómo funcionan. Finalmente, añade tres cajas más y configura los estilos de borde como más te guste.

Puedes echar un vistazo a las páginas de MDN (enlazadas arriba) para obtener información sobre los diferentes estilos de borde que puedes elegir. También puedes echar un vistazo a los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
.caja1 {
  border-top: 5px dotted green;
  border-right: 5px dashed orange;
  border-bottom: 5px dotted red;
  border-left: 5px dashed blue;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  ...
}

.caja2 {
  border: 5px solid black;
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-color: aqua;
  border-bottom-color: pink;
  padding: 15px;
  text-align: center;
  ...
}

.caja3 {
  border: 2px solid black;
  padding: 10px;
  ...
}

...
<div class="caja1">Esta es una caja con diferentes tipos de bordes</div>
<div class="caja2">Esta es otra caja con diferentes tipos de bordes</div>
<div class="caja1">
  <div class="caja2">Esta es una caja con diferentes tipos de bordes dentro de otra caja</div>
</div>
<div class="caja3">
  <div class="caja3">
    <div class="caja3">
      <div class="caja3">
        <div class="caja3">
          <div class="caja3">
            Estas son cajas dentro de cajas
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...
Esta es una caja con diferentes tipos de bordes
Esta es otra caja con diferentes tipos de bordes
Esta es una caja con diferentes tipos de bordes dentro de otra caja
Estas son cajas dentro de cajas

CSS. Unidad 1. Primeros pasos.

Introducción

En el módulo de Introducción al HTML, puedes encontrar los conceptos básicos para saber qué es HTML y cómo se usa para definir documentos que puedan se interpretados por un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Estos estilos vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al fichero HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así, con los mismos estilos por defecto. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, pudiendo establecer el diseño que cada uno desee.

¿Para qué sirve CSS?

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros como SVG o XML.

Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo FirefoxChrome o Edge, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

El código CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar también para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación.

Sintaxis de CSS

CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre con letras grandes de color rojo».

El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

h1 {
    color: blue;
    font-size: 5em;
}

La regla se abre con un selector. Este selecciona el elemento HTML al que queremos aplicar nuestros estilos. En este caso, cambiaremos el diseño de los encabezados de nivel uno (<h1>).

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra:

h1 {
    color: blue;
    font-size: 5em;
}

p {
    color: green;
}

Algunos valores se aprenden rápidamente, mientras que otros son difíciles de recordar. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o si deseas saber qué más se puede usar como valor. Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características) enumeradas en la referencia CSS del proyecto MDN. También puedes buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre alguna particularidad de CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

Añadir CSS a un documento

Lo primero que debemos hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el código CSS desde el encabezado del documento. Para ello bastará con crear un archivo en la misma carpeta que el documento HTML y guardarlo como estilos.css. La extensión .css indicará que nuestro archivo contiene código CSS.

Para vincular estilos.css a index.html, bastará con añadir la siguiente línea en algún lugar dentro del <head> del documento HTML:

<link rel="stylesheet" href="estilos.css">

Este elemento <link> utiliza el atributo rel para indicarle al navegador que debe utilizar una hoja de estilo y especifica la ubicación de esa hoja de estilo con el valor del atributo href. Puedes probar si el código CSS funciona correctamente añadiendo una regla al fichero estilos.css. Para ello puedes usar cualquier editor de código para añadir lo siguiente al archivo CSS:

h1 {
  color: blue;
}

Debes tener en cuenta que después de hacer cualquier cambio, deberás guardar los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser azul. Si esto es correcto, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no cambia el color del encabezado, verifica que hayas escrito todo correctamente.

Puedes continuar trabajando en estilos.css localmente o usar cualquier otro editor (como repl.it) para continuar con este tutorial.

Ejercicio propuesto: Enlazar ficheros y añadir estilos

Nuestro punto de partida en esta unidad es un documento HTML. Copia el código que tienes a continuación y guárdalo en un nuevo archivo HTML para trabajar en tu propio ordenador. Después de eso, crea un nuevo archivo CSS para configurar todos los títulos <h1> en color rojo y guárdalo con el nombre «estilos.css» en la misma carpeta que el documento HTML. Finalmente verifica los resultados usando un navegador y no olvides validar el código.

Recuerda que la parte más importante de este ejercicio es vincular tu archivo CSS colocando una sola línea dentro de la sección <head>. Después de eso, dentro de «estilos.css» solo necesitarás insertar tres líneas:
  1. HTML file:
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Empezando con CSS</title>

    <!-- Utilizaremos los estilos que tengamos dentro de 'estilos.css' -->
    <link rel="stylesheet" href="estilos.css">
</head>
<body>   
    <h1>Yo soy un estilo de nivel 1</h1>

    <p>Esto es un párrafo de texto.</p> 
    <p>Esto es un párrafo y también un enlace a <a href="https://google.com">Google</a>.</p>

    <ul>
        <li>Primer elemento de una lista</li>
        <li>Segundo elemento de una lista</li>
        <li>Tercer elemento de una lista</li>
    </ul>
</body>
</html>
  1. Fichero CSS (estilos.css):
h1 {
  ...
}

Ejercicio propuesto: Estilos de encabezados

Usando los archivos HTML y CSS del ejercicio anterior, añade algunos encabezados <h2> y cambia el color con el que aparecen utilizando CSS. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Dar formato a elementos HTML

Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para seleccionar todos los párrafos del documento, se usa el selector p. De esta forma, para hacer que el texto de todos los párrafos se muestren de color verde, bastará con utilizar el siguiente código:

p {
  color: green;
}

Puedes utilizar múltiples selectores a la vez, separándolos con una coma. Por ejemplo, si queremos que el texto de todos los párrafos y de todos los elementos de cualquier lista sea verde, el código a utilizar sería el siguiente:

p, li {
    color: green;
}

Ejercicio propuesto: Cambiar el color de varios elementos

Usando los archivos HTML y CSS del ejercicio anterior, cambia el color de los párrafos y elementos de la lista. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Aplicar formato según el estado

CSS nos ofrece la capacidad de aplicar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anchor). Tiene diferentes estados dependiendo de si se ha visitado o no, si se pasa el ratón por encima, o si se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. Utilizando el código CSS que se muestra a continuación se deberían visualizar en color rosa los enlaces que no se han visitado y en verde los que sí.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

También puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:

a:hover {
  text-decoration: none;
}

En el ejemplo de arriba hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, es conveniente recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento.

Ejercicio propuesto: Aplicar estilos a los enlaces

Usando los archivos HTML y CSS del ejercicio anterior, inserta varios párrafos con algunos otros enlaces a tus páginas preferidas y cambia el color de todos los enlaces. También debes usar diferentes colores cuando se ha visitado el enlace y cuando el ratón está sobre el enlace. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como viene siendo habitual, verifica los resultados con tu navegador y no olvides validar el código.

Puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Cambiar el comportamiento predeterminado de los elementos

Cuando visualizamos una página web, incluso con un código tan simple como el de nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se amontonaría y tendríamos que darle formato desde cero. Todos los navegadores modernos suelen mostrar el contenido HTML por defecto de la misma manera.

Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <ul>, que muestra una lista desordenada. Por defecto tiene viñetas, pero si decidimos que no las queremos, podemos eliminarlas fácilmente de este modo:

ul {
  list-style-type: none;
}

Puedes consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior donde podrás probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página). También descubrirás en esa página que además de eliminar las viñetas de la lista, también puedes cambiarlas.

Ejercicio propuesto: Cambiar las viñetas de una lista

Utilizando los archivos HTML y CSS del ejercicio anterior, intenta configurar el list-style-type con square. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Deberías obtener un resultado similar a este:
  • Primer elemento de una lista
  • Segundo elemento de una lista
  • Tercer elemento de una lista

Ejercicio propuesto: Cambiar el estilo de una lista numerada

Usando los archivos HTML y CSS del ejercicio anterior, agregue una lista ordenada (<ol>) y configura el list-style-type con upper-roman. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

Deberías obtener un resultado similar a este:
  • Elemento uno
  • Elemento dos
  • Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres

Utilizando clases

Hasta ahora, hemos utilizado selectores cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y establecer el estilo que se aplicará al utilizar dicha clase.

Puedes añadir un atributo de clase a cualquier elemento dentro de tu fichero HTML. Por ejemplo, podríamos utilizar el atributo «class» sobre elementos de tipo lista de la siguiente forma:

<ul class="lista-roja-con-cuadrados">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>
<ul class="lista-azul-con-circulos">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>

Después de escribir ese código HTML, en tu CSS, puedes diseñar las clases lista-roja-con-cuadrados y lista-roja-con-cuadrados creando un par de selectores que comiencen con un punto:

.lista-roja-con-cuadrados {
  list-style-type: square;
  color: red;
}
.lista-azul-con-circulos {
  list-style-type: circle;
  color: blue;
}

Para observar el resultado después de escribir nuevo código HTML y CSS, bastará con guardar los archivos y refrescar el contenido del navegador pulsando Ctrl+F5.

Ejercicio propuesto: Estilos diferentes para cada lista

Usando los archivos HTML y CSS del ejercicio anterior, añade varias listas para obtener algo similar al resultado que se muestra a continuación. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.

En lo que respecta a las listas no ordenadas (<ul>) debes crear 4 clases diferentes, cada una de ellas con un valor diferente de la propiedad list-style-type (none, disc, circle, square). Para las listas ordenadas (<ol>) debes crear otras clases, cada una también con valores diferentes para la propiedad list-style-type (upper-roman, lower-greek, lower-alpha, upper-alpha).

Listas no ordenadas

  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres
  • Elemento uno
  • Elemento dos
  • Elemento tres

Listas ordenadas

  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres
  1. Elemento uno
  2. Elemento dos
  3. Elemento tres

Ejercicio propuesto: Usar CSS con encabezados, párrafos y texto general

Cambia el color de diversos elementos de ejercicios previos de HTML en los que utilizaste encabezados, párrafos y texto formateado en las unidades 1 y 2 (https://fernandoruizrico.com/html-unidad-1/ and https://fernandoruizrico.com/html-unidad-2/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Ejercicio propuesto: Usar CSS con hipervínculos

Cambia el color de diversos elementos de la unidad 3 de HTML (https://fernandoruizrico.com/html-unidad-3/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

Ejercicio propuesto: Usar CSS con listas

Cambia el color, las viñetas y la numeración de diversas listas de los ejercicios de listas de la unidad 4 de HTML (https://fernandoruizrico.com/html-unidad-4/). No olvides validar tu código de nuevo.

Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.