Ejercicios resueltos CSS

Esta sección de «Ejercicios Resueltos CSS» te ofrece la oportunidad de mejorar tus habilidades en la creación de hojas de estilo en cascada (CSS) a través de una serie de desafíos prácticos y sus soluciones detalladas. Estos ejercicios prácticos se corresponden con el nivel básico de CSS, si ya has superado este nivel, puedes saltar a los ejercicios resueltos de CSS intermedio y CSS avanzado.

Contenidos del artículo

Ejercicios resueltos CSS

1. Ejercicio resuelto CSS. Uso de selectores

A partir del código HTML proporcionado, debes completar los huecos del código CSS dado. Agrega las reglas de estilo CSS incluidas en los comentarios explicativos que se encuentran junto a las cajas de los huecos a rellenar.

Código HTML:

<main>
  <h1>Encabezado Principal</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit nibh at felis.</p>
  <h2>Subtítulo</h2>
  <p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <a href="#">Donec porttitor</a>, magna eu varius luctus.</p>
</main>
<div id="lista">
  <h2>Lista de elementos destacados</h2>
  <ul class="destacado">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
  </ul>
</div>
<button>Registrarse</button>

Solución en CodePen

2. Ejercicio resuelto CSS. Uso de propiedades de los textos

Partiendo del siguiente código HTML:

<h1>Propiedades de los Textos</h1>
<p>Las propiedades de texto en CSS permiten controlar el aspecto y el diseño del texto en una página web. A continuación, se describen algunas de estas propiedades:</p>

<h2>Text-Indent</h2>
<p>La propiedad <em>text-indent</em> se utiliza para establecer el desplazamiento de la primera línea de un párrafo. Puede definirse en longitud (por ejemplo, "20px") o porcentaje (por ejemplo, "10%").</p>
<p class="text-indent">Este es un ejemplo de texto con desplazamiento de la primera línea utilizando la propiedad <em>text-indent</em>. La primera línea está desplazada 30px.</p>

<h2>Text-Align</h2>
<p>La propiedad <em>text-align</em> se utiliza para alinear el texto en una caja. Los valores comunes son "left", "right", "center" y "justify".</p>
<p class="text-align">Este es un ejemplo de texto alineado a la derecha utilizando la propiedad <em>text-align</em>.</p>

<h2>Text-Decoration</h2>
<p>La propiedad <em>text-decoration</em> se utiliza para aplicar efectos de subrayado y tachado al texto. Los valores incluyen "none", "underline", "overline" y "line-through".</p>
<p class="text-decoration">Este es un ejemplo de texto con subrayado utilizando la propiedad <em>text-decoration</em>.</p>

<h2>Letter-Spacing</h2>
<p>La propiedad <em>letter-spacing</em> controla el espacio entre caracteres. Puede definirse como "normal" o en una longitud específica.</p>
<p class="letter-spacing">Este es un ejemplo de texto con espacio entre caracteres utilizando la propiedad <em>letter-spacing</em>. Los caracteres están separados por 3px.</p>

<h2>Word-Spacing</h2>
<p>La propiedad <em>word-spacing</em> controla el espacio entre palabras. Puede definirse como "normal" o en una longitud específica.</p>
<p class="word-spacing">Este es un ejemplo de texto con espacio entre palabras utilizando la propiedad <em>word-spacing</em>. Las palabras están separadas por 10px.</p>

<h2>Text-Transform</h2>
<p>La propiedad <em>text-transform</em> transforma el texto a mayúsculas o minúsculas. Los valores comunes son "capitalize", "uppercase", "lowercase" y "none".</p>
<p class="text-transform">Este es un ejemplo de texto en mayúsculas utilizando la propiedad <em>text-transform</em>.</p>

<h2>Line-Height</h2>
<p>La propiedad <em>line-height</em> establece el tamaño del espacio entre líneas. Puede definirse en longitud o porcentaje.</p>
<p class="line-height">Este es un ejemplo de texto con un espacio entre líneas mayor utilizando la propiedad <em>line-height</em>. El espacio entre líneas es de 70px.</p>

<h2>Vertical-Align</h2>
<p>La propiedad <em>vertical-align</em> se utiliza para alinear verticalmente elementos en línea. Puede alinearse en la parte superior, en el centro o en la parte inferior, o utilizar otros valores como "baseline", "sub" o "super".</p>
<p>Este es un ejemplo de texto con alineación vertical con una tabla usando <em>vertical-align</em>.</p>
<table>
  <tr>
    <td class="a">vertical-align: top</td>
    <td class="b">vertical-align: middle</td>
    <td class="c">vertical-align: bottom</td>
  </tr>
</table>

Crea estilos CSS para aplicar a los elementos HTML según las siguientes especificaciones:

Todos los párrafos (<p>) que son hermanos de (<p>) deben tener un color de texto verde (color: green). Utiliza selectores adyacentes.
Los párrafos con la clase text-indent deben tener un desplazamiento de la primera línea de 30px.
Los párrafos con la clase text-align deben alinear el texto a la derecha.
Los párrafos con la clase text-decoration deben tener un efecto de subrayado.
Los párrafos con la clase letter-spacing deben tener un espacio entre caracteres de 3px.
Los párrafos con la clase word-spacing deben tener un espacio entre palabras de 10px.
Los párrafos con la clase text-transform deben transformar el texto a mayúsculas.
Los párrafos con la clase line-height deben tener un espacio entre líneas de 70px.
Las celdas (<td>) de la tabla deben tener una altura de 100px y un borde de 1px sólido de color gris (height: 100px; border: 1px solid grey).
Las celdas de clase a, b, y c deben alinearse verticalmente de acuerdo a su clase (vertical-align: top, vertical-align: middle, vertical-align: bottom respectivamente).

Solución en CodePen

3. Ejercicio resuelto CSS. Creación de un Call to Action con imagen de fondo

Crea un contenedor de «Call to Action» utilizando HTML y CSS. Sigue las siguientes instrucciones:

Crea un contenedor con la clase cta-container. Este contenedor servirá como el «Call to Action».
Asigna una imagen de fondo al contenedor. Asegúrate de que la imagen de fondo cubra completamente el contenedor.
Alinea verticalmente la imagen de fondo y colócala en el centro del contenedor.
Evita que la imagen de fondo se repita.
Alinea el contenido del «Call to Action» en el centro del contenedor.
Agrega un relleno de 60px alrededor del contenido para darle espacio.
Dentro del contenedor, crea un título (h2) con la clase cta-text que diga «¡Aprovecha nuestra oferta especial!». Ajusta el tamaño de fuente a 28px y utiliza negrita para el texto.
Debajo del título, agrega un párrafo (p) con la clase cta-text que diga «Hasta un 40% de descuento en productos seleccionados.»
Agrega un botón (button) con la clase cta-button que diga «Descubrir Ofertas». Estiliza el botón con un fondo de color #626bb2, texto en blanco, relleno de 15px en vertical y 30px en horizontal, sin bordes visibles, bordes redondeados, un tamaño de fuente de 20px y texto en mayúsculas.

Solución:

index.html

<div class="cta-container">
  <h2 class="cta-text">¡Aprovecha nuestra oferta especial!</h2>
  <p class="cta-text">Hasta un 40% de descuento en productos seleccionados.</p>
  <button class="cta-button">Descubrir Ofertas</button>
</div>

styles.css

.cta-container {
  background-image: url("https://img.es/img.svg"); /* Imagen de fondo */
  background-size: cover; /* Ajusta la imagen al contenedor */
  background-position: center; /* Centra la imagen verticalmente y la coloca en la parte superior */
  background-repeat: no-repeat; /* No se repite la imagen de fondo */
  background-attachment: scroll; /* Fondo desplazable con el contenido */
  text-align: center; /* Alineación del contenido al centro */
  padding: 60px;
}

.cta-text {
  color: #333; /* Color del texto oscuro */
  font-size: 28px;
  font-weight: bold;
}

.cta-button {
  background-color: #626bb2; /* Color de fondo del botón */
  color: #fff; /* Color del texto del botón en blanco */
  padding: 15px 30px; /* Relleno del botón */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 20px;
  cursor: pointer; /* Cambio de cursor al pasar el ratón */
  text-transform: uppercase; /* Texto en mayúsculas */
}

Solución en CodePen

4. Ejercicio resuelto CSS. Creación de un listado con emoji utilizando ::before

Crea un listado utilizando HTML y CSS para que incluya el emoji 😻 en cada elemento de la lista. Debes lograr esto utilizando el pseudo-selector ::before. Sigue estos pasos:

Crea un documento HTML con una estructura básica, que incluya un título y una lista no ordenada (<ul>) dentro de un contenedor.
Dentro de la lista, crea al menos cinco elementos de lista (<li>).
Utiliza CSS para estilizar la lista de la siguiente manera:
- Establece un estilo personalizado para la lista, como color de texto, tipo de fuente o espaciado, según tus preferencias.
- Utiliza el pseudo-selector ::before para cada elemento de la lista (<li>) y agrega el emoji 😻 (😻) antes del contenido del elemento. Asegúrate de que el emoji se muestre correctamente y esté separado del texto del elemento.
- Añade un espacio o algún estilo de separación entre el emoji y el texto del elemento para que se vea estéticamente agradable.

Solución:

index.html

 <h1> 😻 Listado con Emoji &#x1F63B;</h1>
    <ul class="emoji-list">
        <li>Mi primera tarea</li>
        <li>Mi segunda tarea</li>
        <li>Mi tercera tarea</li>
        <li>Mi cuarta tarea</li>
        <li>Mi quinta tarea</li>
    </ul>

styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 24px;
    color: #333;
}
.emoji-list {
    list-style: none;
    padding: 0;
}
.emoji-list li {
    font-size: 18px;
    margin: 10px 0;
    position: relative; /* Necesario para ::before */
}
.emoji-list li::before {
    content: "😻 "; /* Inserta el emoji antes del texto del elemento */
    font-size: 24px;
    margin-right: 10px; /* Espacio entre el emoji y el texto */
}

Solución en CodePen

5. Ejercicio resuelto CSS. Creación de un menú de navegación Horizontal

Diseña y crea un menú de navegación horizontal utilizando HTML y CSS. El menú debe contener cuatro enlaces y aplicar estilos específicos.

Apariencia:

Instrucciones:

Dentro del archivo HTML, crea una estructura para el menú de navegación utilizando elementos <nav>, <ul>, <li>, y <a>. El menú debe contener cuatro enlaces con los siguientes nombres: «Inicio», «Servicios», «Nosotros» y «Contacto».
Dentro del archivo CSS, define el estilo global para todos los elementos de la página utilizando el selector universal. Asigna a la fuente la familia Arial y ponla en negrita.
Establece los estilos para la etiqueta <nav>. Asegúrate de que tenga un margen y un relleno de 0 y que su lista de estilos sea none.
Define los estilos para los enlaces dentro del menú de navegación. Establece el ancho en 100px, elimina la decoración de texto, alinea el texto al centro, establece el color de texto en blanco y el color de fondo en negro. Agrega un relleno superior e inferior de 10px y un relleno izquierdo y derecho de 5px. Agrega un borde derecho de 1px sólido con el color #336699. Asegúrate de que los enlaces sean elementos de bloque.
Define los estilos para los elementos de lista dentro del menú de navegación. Utiliza float: left; para que los elementos se coloquen horizontalmente.
Agrega estilos de cambio de color al hacer hover en los enlaces. Cuando el usuario pase el cursor sobre un enlace, cambia el color de fondo a #336699.
Utiliza la pseudo-clase :last-child para seleccionar el último elemento de la lista y, a través de su enlace (<a>), elimina el borde derecho para evitar que aparezca en el último enlace.

Solución:

index.html

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

styles.css

*{ font-family: Arial; font-weight: bold;}
nav ul {
  margin:0;
  padding:0;
  list-style-type:none;
} 
nav ul a { 
  width:100px;
  text-decoration:none;
  text-align:center;
  color:white;
  background-color: black;
  padding:10px 5px;
  border-right: 1px solid #336699;
  display:block; 
}
nav ul li {
  float:left;
}
nav ul a:hover {
  background-color:#336699;
}
li:last-child a{ 
  border-right:none; 
}

Solución en CodePen

6. Ejercicio resuelto CSS. Creación de un breadcrumb navegacional

Crea un breadcrumb (migas de pan) navegacional utilizando HTML y CSS. El breadcrumb debe contener enlaces que permitan navegar hacia páginas anteriores y siguientes, y se deben aplicar estilos específicos.

Apariencia:

Instrucciones:

Dentro del archivo HTML, crea una estructura para el breadcrumb utilizando un elemento <div> con la clase breadcrumb. El breadcrumb debe contener dos enlaces con las clases left y right. El primer enlace debe mostrar «« Anterior» y el segundo enlace debe mostrar «Siguiente »».
Dentro del archivo CSS, asigna la fuente Arial y establece un relleno de 0.5em alrededor del breadcrumb.
Establece los estilos para los enlaces dentro del breadcrumb. Asigna el color #0095eb, elimina la decoración de texto, y ponlo en negrita.
Define los estilos de cambio de color al hacer hover en los enlaces. Cuando el usuario pase el cursor sobre un enlace, cambia el color del texto a #006196 y subraya el texto.
Define los estilos para el enlace con la clase right. Utiliza float: right; para alinear este enlace a la derecha del breadcrumb.
Define los estilos para el enlace con la clase left. Utiliza float: left; para alinear este enlace a la izquierda del breadcrumb.

Solución:

index.html

<div class="breadcrumb">
   <a href="#" class="left">&laquo; Anterior</a>
   <a href="#" class="right">Siguiente &raquo;</a>
</div>

styles.css

.breadcrumb {
  font-family: Arial;
  padding: .5em;
}
.breadcrumb a{ color: #0095eb; text-decoration:none; font-weight: bold; }
.breadcrumb a:hover{ text-decoration:underline; color: #006196; }
.right {
  float: right;
}
.left {
  float: left;
}

Solución en CodePen

7. Ejercicio resuelto CSS. Creación de un menú de navegación vertical

Partiendo del siguiente código HTML y de la captura visual de un menú horizontal:

<ul class="menu">
  <li><a href="#" title="Link 1">Link 1</a></li>
  <li><a href="#" title="Link 2">Link 2</a></li>
  <li><a href="#" title="Link 3">Link 3</a></li>
  <li><a href="#" title="Link 4">Link 4</a></li>
  <li><a href="#" title="Link 5">Link 5</a></li>
</ul>

Apariencia:

Aplica estilos CSS para que la lista del menú tenga la siguiente apariencia:

Establece que todos los elementos dentro de la página utilicen la fuente Arial.
Dale a la lista (ul) con la clase «menu» un ancho de 140px, elimina las viñetas de lista, establece los márgenes y relleno a 0 y agrega un borde de 1px sólido con el color #FFC83D.
Cada elemento de la lista (li) debe tener un borde inferior de 1px sólido con el color #FFC83D. El último elemento de la lista no debe tener un borde inferior.
Los enlaces (<a>) dentro de los elementos de la lista deben ocupar todo el ancho disponible, centrar su texto, no mostrar subrayado y tener un color de texto de #333. Además, deben tener un relleno de 5px y un fondo de color #E5F3FE.
Cuando el cursor esté sobre un enlace, el fondo del enlace debe cambiar a #c8e2f7.
Agrega un emoji «👉» antes del texto de cada enlace utilizando pseudo-elementos.

Solución en CodePen

8. Ejercicio resuelto CSS. Creación de una galería de imágenes

Crea una galería de imágenes utilizando HTML y CSS. La galería debe contener una serie de imágenes con estilos específicos y un título.

Apariencia:

Instrucciones:

Dentro del archivo HTML, crea la estructura básica de una página web. Agrega un elemento <h1> con el texto «Galería de imágenes» y un elemento <div> con el id «galeria». Dentro del <div>, agrega nueve elementos <img>. Puedes utilizar imágenes de ejemplo proporcionadas en la siguiente lista con sus respectivos atributos src y alt:

   <img src="https://cdn-icons-png.flaticon.com/128/12411/12411992.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12412/12412024.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12412/12412030.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12411/12411976.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12411/12411970.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12411/12411990.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12412/12412017.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12412/12412011.png" alt="Imagen" />
   <img src="https://cdn-icons-png.flaticon.com/128/12412/12412025.png" alt="Imagen" />

En el archivo CSS, define el estilo global para todos los elementos utilizando el selector *. Establece el margen a 0.
Establece los estilos para el elemento <h1>. Centra el texto, establece un fondo de color #EDEEEE, color de texto orange, un borde inferior de 3px solid #4caf50, y un relleno de 30px.
Define los estilos para el <div> con el id «galeria». Establece un ancho máximo de 500px y centrar el elemento horizontalmente con margin: 0 auto;.
Establece los estilos para los elementos <img> dentro de la galería. Utiliza float: left; para alinear las imágenes a la izquierda, agrega un relleno de 1.2em para separar las imágenes y aplica los estilos de cambio de color al hacer hover. Cuando el usuario pase el cursor sobre una imagen, cambia el fondo de color a #e8f1f4.

Solución:

index.html

<h1>Galería de imágenes</h1>
<div id="galeria">
  <img src="https://cdn-icons-png.flaticon.com/128/12411/12411992.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12412/12412024.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12412/12412030.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12411/12411976.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12411/12411970.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12411/12411990.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12412/12412017.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12412/12412011.png" alt="Imagen" />
  <img src="https://cdn-icons-png.flaticon.com/128/12412/12412025.png" alt="Imagen" />
</div>

styles.css

*{
   margin:0;
}
h1{
   text-align: center; 
   background-color: #EDEEEE;
   color: orange; 
   border-bottom: 3px solid #4caf50; 
   padding: 30px;
}
#galeria {
  max-width: 500px;
  margin: 0 auto;
}
#galeria img {
  float: left;
  padding: 1.2em;  
}
#galeria img:hover{
  background-color: #e8f1f4;
}

Solución en CodePen

9. Ejercicio resuelto CSS. Creación de una tabla de productos

Dado el siguiente código HTML que representa una tabla de productos:

<h1>Tabla de Ejemplo</h1>
<table class="styled-table">
  <caption><b>Tabla 1.</b> Lista de Productos</caption>
  <thead>
    <tr>
      <th>Nº</th>
      <th>Producto</th>
      <th>Precio</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Producto A</td>
      <td>25</td>
      <td>50</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Producto B</td>
      <td>15</td>
      <td>30</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Producto C</td>
      <td>40</td>
      <td>20</td>
    </tr>
    <tr>
      <th>4</th>
      <td>Producto D</td>
      <td>32</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

Escribe el código CSS necesario para lograr el siguiente estilo en la tabla.

Apariencia:

Instrucciones:

A continuación, se describen los estilos que debes aplicar:

Estilos generales:

Utiliza la fuente «Arial» para todo el documento.
Centra el texto horizontalmente en todos los elementos.

Estilos de la tabla:

Establece un ancho del 80% para la tabla, de manera que ocupe el 80% del ancho disponible en la ventana.
Centra la tabla horizontalmente con un margen superior de 20 píxeles.
Coloca el título en la parte inferior de la tabla.

Estilos del título de la tabla:

Utiliza un tamaño de fuente de 20 píxeles.
Añade un espacio de 10 píxeles alrededor del título.

Estilos de las celdas de encabezado (th) y de datos (td):

Añade un espacio de 10 píxeles alrededor de todas las celdas.
Establece un fondo azul (#009688) para las celdas de encabezado con texto blanco (#fff).
Agrega un borde sólido de 1 píxel con color gris claro (#ddd) a todas las celdas.

Estilos para filas impares del cuerpo de la tabla:

Aplica un fondo gris claro (#f2f2f2) a las filas impares del cuerpo de la tabla.

Estilo al pasar el cursor sobre una fila del cuerpo de la tabla:

Cambia el fondo de la fila a un tono de verde claro (#c7e2e0) al pasar el cursor sobre ella.

Estilo para la tercera columna (Precio) de las filas del cuerpo de la tabla:

Agrega el símbolo del euro (€) después de los valores en la tercera columna (Precio) de las filas del cuerpo de la tabla.

Solución en CodePen