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.
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
0
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
, yc
deben alinearse verticalmente de acuerdo a su clase (vertical-align: top
,vertical-align: middle
,vertical-align: bottom
respectivamente).
Solución en CodePen
0
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 clasecta-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 clasecta-text
que diga «Hasta un 40% de descuento en productos seleccionados.» - Agrega un botón (
button
) con la clasecta-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
0
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 😻</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
0
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 de0
y que su lista de estilos seanone
. - 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 de10px
y un relleno izquierdo y derecho de5px
. Agrega un borde derecho de1px
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
0
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 clasebreadcrumb
. El breadcrumb debe contener dos enlaces con las clasesleft
yright
. 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 de0.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
. Utilizafloat: right;
para alinear este enlace a la derecha del breadcrumb. - Define los estilos para el enlace con la clase
left
. Utilizafloat: left;
para alinear este enlace a la izquierda del breadcrumb.
Solución:
index.html
<div class="breadcrumb"> <a href="#" class="left">« Anterior</a> <a href="#" class="right">Siguiente »</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
0
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
0
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 elid
«galeria». Dentro del<div>
, agrega nueve elementos<img>
. Puedes utilizar imágenes de ejemplo proporcionadas en la siguiente lista con sus respectivos atributossrc
yalt
:
<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 a0
. - Establece los estilos para el elemento
<h1>
. Centra el texto, establece un fondo de color#EDEEEE
, color de textoorange
, un borde inferior de3px solid #4caf50
, y un relleno de30px
. - Define los estilos para el
<div>
con elid
«galeria». Establece un ancho máximo de500px
y centrar el elemento horizontalmente conmargin: 0 auto;
. - Establece los estilos para los elementos
<img>
dentro de la galería. Utilizafloat: left;
para alinear las imágenes a la izquierda, agrega un relleno de1.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
0
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
0