Ejercicios prácticos CSS Intermedio

01/08/2023

Una vez realizado el tutorial de CSS intermedio, te proporcionamos una colección de ejercicios prácticos resueltos. En esta sección, encontrarás desafíos prácticos que te permitirán aplicar tus habilidades y conocimientos de CSS en situaciones del mundo real.

Contenidos del artículo

Puedes encontrar más ejercicios resueltos aquí: ejercicios de nivel básico y ejercicios de nivel avanzado.

Ejercicios prácticos CSS Intermedio

1. Uso de media queries

A partir del código HTML que se te proporciona, debes escribir las reglas CSS necesarias (utilizando media queries) para lograr una página web que tenga el mismo aspecto que las siguientes imágenes en las que se muestra la página web visualizada en tres dispositivos con diferentes resoluciones de pantalla:

A partir de 1200px: un diseño a tres columnas.

A partir de 600px y hasta 1200px: un diseño a dos columnas.

Hasta 600px: un diseño a una columna.

Algunos datos:

Esta página tiene un diseño adaptable con tres puntos de ruptura:

Hasta 600 px: un diseño a una columna.
A partir de 600px y hasta 1200px: un diseño a dos columnas.
A partir de 1200px: un diseño a tres columnas.

Fíjate bien en las capturas de pantalla e intenta lograr el mismo resultado.

Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que necesites. También puedes añadir etiquetas <div> para definir elementos contenedores en la página.

Se trata de hacer el ejercicio de la forma tradicional, sin usar Flexbox o CSS Grid.

Hasta 600px fuente de tipo Times New Roman y Tamaño fuente: h1 (1.5em) h2 (1.2em), para tamaños superiores fuente de tipo Arial y dejamos por defecto el tamaño definido por navegador. Se deben usar selectores (Ejemplo: li strong{color:purple;}).

Código HTML:

<h1>Formación Profesional en Informática y Comunicaciones</h1>
<h2>Ciclos formativos</h2>
  <ul>
    <li><strong>FPB </strong>Informática de Oficina </li>
    <li><strong>FPB </strong>Informática y Comunicaciones</li>
    <li><strong>GM </strong>Sistemas Microinformáticos y Redes</li>
    <li><strong>GS </strong>Administración de Sistemas Informáticos en Red </li>
    <li><strong>GS </strong>Desarrollo de Aplicaciones Multiplataforma </li>
    <li><strong>GS </strong>Desarrollo de Aplicaciones Web</li>
  </ul>
 <h2>Cursos avanzados</h2>
    <ul>
      <li><strong>Curso de especialización:</strong> Inteligencia Artificial y Big Data</li>
      <li><strong>Curso de especialización:</strong> Desarrollo de videojuegos y realidad virtual</li>
      <li><strong>Curso de especialización:</strong> Ciberseguridad en Entornos de las Tecnologías de la Información</li>
    </ul>
<h2>Cómo estudiar</h2>
    <ul>
      <li><strong>Modalidad presencial:</strong> se estudia en los centros educativos, con la asistencia regular a clase.</li>
      <li><strong>Modalidad a distancia:</strong> se estudia con comodidad desde cualquier lugar y los exámenes se realizan presencialmente.</li>
      <li><strong>Pruebas libres:</strong> vía alternativa para obtener las titulaciones sin necesidad de cursar los ciclos formativos.</li>
    </ul>

Solución:

body {
    font-family: Arial;
}
#cursos-avanzados li strong, #como-estudiar li strong {
  color: purple;
}
@media (min-width: 1201px) {
  #ciclos {
    float: left;
	  width: 30%;
  }
  #bloque2 {
    float: left;
	  width: 70%;
  }
  #cursos-avanzados {
    float: left;
	  width: 50%;
  }
  #como-estudiar {
    float: left;
	  width: 50%;  
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  #como-estudiar li strong {
    text-decoration: underline;
  }
  #ciclos {
    float: left;
	  width: 30%;
  }
  #bloque2 {
    float: left;
	  width: 70%;
  }
  #ciclos ul {
    list-style-type: none;
	  padding: 0;
  }
  #ciclos li + li {
    margin-top: 10px;
  }
  #ciclos li strong {
    display: block;
  }
}
@media (max-width: 600px) {
  body {
    font-family: "Times New Roman";
  }
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1.2em;
	  border-bottom: 1px solid #000;
  }
  ul {
    list-style-type: none;
	  padding: 0;
  }
  li + li {
    margin-top: 10px;
  }
  li strong {
    display: block;
  }
}

Ejemplo en CodePen

2. Botones personalizados con distintos cursores

Crea botones personalizados utilizando CSS. Cada botón tendrá un estilo único y un cursor específico. Sigue los siguientes pasos para completar el ejercicio:

Crea un archivo HTML con la siguiente estructura:

 <button class="btn-normal">Botón Normal</button>
 <button class="btn-outline">Botón Outline</button>
 <button class="btn-alert">Botón Alerta</button>

Agrega los estilos necesarios para los botones:

Estilo General de los Botones:
- Establece un relleno (padding) de 10px en la parte superior y inferior y 20px en los lados.
- Elimina el borde utilizando border: none.
- Agrega un margen de 10px alrededor de los botones.
- Usa border-radius para redondear las esquinas de los botones en 5px.
Botón Normal (btn-normal):
- Fondo de color de fondo #3498db.
- Texto en color blanco.
Botón de Tipo Outline (btn-outline):
- Establece un borde sólido de 2px de color #3498db.
- Fondo transparente (background: transparent).
- Texto en color #3498db.
Botón de Alerta (btn-alert):
- Fondo de color de fondo #e74c3c.
- Texto en color blanco.
Estilos Hover y Active:
- Cuando el cursor esté sobre un botón (:hover), aplícale una transformación de escala de 1.1 para agrandarlo ligeramente.
Cursores Personalizados:
- El botón normal (btn-normal) debe tener un cursor de tipo crosshair.
- El botón de tipo outline (btn-outline) debe tener un cursor de tipo pointer.
- El botón de alerta (btn-alert) debe tener un cursor de tipo help.

Solución:

button {
    padding: 10px 20px;
    border: none;
    margin: 10px;
    border-radius: 5px;
    font-size: 16px;
}
.btn-normal {
    background-color: #3498db;
    color: white;
}
.btn-outline {
    border: 2px solid #3498db;
    background: transparent;
    color: #3498db;
}
.btn-alert {
    background-color: #e74c3c;
    color: white;
}
.btn-normal:hover,
.btn-outline:hover,
.btn-alert:hover {
    transform: scale(1.1);
}
.btn-normal {
    cursor: crosshair;
}
.btn-outline {
    cursor: pointer;
}
.btn-alert {
    cursor: help;
}

Ejemplo en CodePen

3. Uso de selectores de atributos en CSS

Crea un documento HTML simple que contenga una lista de elementos con atributos personalizados. Luego, utiliza selectores de atributos en CSS para aplicar estilos a los elementos que cumplan con ciertos criterios de atributos. Sigue los pasos a continuación:

Crea un archivo HTML con la siguiente estructura:

<ul>
  <li data-type="fruta">Manzana</li>
  <li data-type="fruta">Plátano</li>
  <li data-type="verdura">Lechuga</li>
  <li data-type="verdura">Zanahoria</li>
  <li data-type="carne">Pollo</li>
</ul>

Crea estilos para los elementos de la lista:
- Utiliza un selector de atributos para seleccionar todos los elementos (<li>) que tengan el atributo data-type igual a «fruta». Estiliza estos elementos con un fondo de color verde claro y un texto de color blanco.
- Utiliza otro selector de atributos para seleccionar todos los elementos que tengan el atributo data-type igual a «verdura». Estiliza estos elementos con un fondo de color naranja y un texto de color negro.

Solución:

/* Estiliza elementos con data-type="fruta" */
li[data-type="fruta"] {
    background-color: lightgreen;
    color: white;
}
/* Estiliza elementos con data-type="verdura" */
li[data-type="verdura"] {
    background-color: orange;
    color: black;
}

Ejemplo en CodePen

Ejercicios prácticos CSS Avanzado

4. Contenedor fijo y variable con `calc()`

Crea un documento HTML que incluya dos contenedores, uno de ancho fijo y otro de ancho variable utilizando la función calc() en CSS. Además, agrega colores de fondo y estilos CSS específicos. Sigue estos pasos:

Crea un archivo HTML con la siguiente estructura:

<div class="fixed-container">
    <p>Contenedor Fijo</p>
</div>
<div class="variable-container">
    <p>Contenedor Variable</p>
</div>

Agrega estilos para los contenedores:

El primer contenedor (fixed-container) debe tener un ancho fijo de 300px, un color de fondo diferente (por ejemplo, #3498db), y utilizar box-sizing: border-box para que el relleno (padding) no afecte el ancho total.
El segundo contenedor (variable-container) debe tener un ancho variable utilizando la función calc(). Su ancho será igual al 100% del ancho del contenedor principal (body) menos el ancho del contenedor fijo, debe tener un color de fondo diferente (por ejemplo, #e74c3c), y también debe utilizar box-sizing: border-box para que el relleno (padding) no afecte el ancho total.

Solución:

.fixed-container {
    width: 300px;
    background-color: #3498db;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}
.variable-container {
    width: calc(100% - 300px);
    background-color: #e74c3c;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}

Ejemplo en CodePen

5. Propiedades personalizadas en CSS con colores específicos

Crea propiedades personalizadas en CSS con nombres específicos y colores personalizados para reutilizar estilos comunes en tu sitio web. Sigue los siguientes pasos:

Crea un archivo HTML con la siguiente estructura:

<h1>Usando Propiedades Personalizadas</h1>
<div class="custom-box">
     <p class="custom-text">Este es un párrafo con estilos personalizados.</p>
</div>

Define propiedades personalizadas con nombres específicos y colores personalizados, y aplícalas a elementos HTML:

Define la propiedad --primary-color con el valor #3498db (color azul) para representar el color principal.
Define la propiedad --secondary-color con el valor white (color blanco) como el segundo color.
Define la propiedad --rounded-border con el valor 10px para especificar el radio de esquina de los elementos.
Define los siguientes estilos para .custom-box y .custom-text:
.custom-box:
- background-color: Debes aplicar la propiedad background-color y usar la variable personalizada var(--primary-color) para establecer el color de fondo.
- border-radius: Debes aplicar la propiedad border-radius y usar la variable personalizada var(--rounded-border) para establecer el radio de esquina de la caja.
- Define el espacio de relleno dentro del elemento .custom-box en 20px.
.custom-text:
- color: Debes aplicar la propiedad color y usar la variable personalizada var(--secondary-color) para establecer el color del texto.
- Aplica un tamaño de fuente de 18px.

Solución:

/* Definición de propiedades personalizadas */
:root {
    --primary-color: #3498db; /* Color principal (azul) */
    --secondary-color: white; /* Segundo color (blanco) */
    --rounded-border: 10px; /* Radio de esquina para elementos */
}
/* Estilos para .custom-box */
.custom-box {
    background-color: var(--primary-color);
    border-radius: var(--rounded-border);
    padding: 20px;
}
/* Estilos para .custom-text */
.custom-text {
    color: var(--secondary-color);
    font-size: 18px;
}

Ejemplo en CodePen

6. Menú con transiciones y transformaciones

Crea un menú de navegación utilizando transiciones y transformaciones en CSS. A continuación, se presenta el código HTML y las especificaciones CSS que debes implementar:

Código HTML:

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

Instrucciones:

Utiliza el código HTML proporcionado como base para tu página.
Quitar viñetas de la lista: Elimina las viñetas del listado.
Aplicar márgenes horizontales: Añade márgenes horizontales de 5px a los enlaces del menú para separarlos ligeramente.
Eliminar subrayado: Elimina el subrayado de los enlaces en el menú.
Definir color de texto: Establece el color de texto en blanco (#fff) para que los enlaces se muestren en color blanco.
Establecer relleno: Define un relleno de 10px en la parte superior y inferior y 15px en los lados para dar espacio a los enlaces del menú.
Agregar transiciones suaves: Implementa una transición suave de 0.3 segundos en todas las propiedades para que los cambios de estilo sean fluidos.
Color de fondo predeterminado: Define un color de fondo predeterminado para los enlaces en el menú. Puedes usar el color #3498db.
Bordes redondeados: Aplica bordes redondeados (border-radius) con un valor de 5px a los enlaces.
Alinear en línea horizontalmente: Utiliza float: left para alinear los enlaces horizontalmente en el menú.
Estilos al pasar el mouse: Personaliza los estilos para los enlaces cuando el mouse pasa sobre ellos. Cambia el color de fondo a #1f587d y escala ligeramente los enlaces utilizando transformaciones.

Solución:

ul {
  list-style-type: none; /*También list-style*/
}
a {
  margin: 0 5px;
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
  transition: all 0.3s ease;
  background-color: #3498db;
  border-radius: 5px;
  float: left;
}
a:hover {
  background-color: #1f587d;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Ejemplo en CodePen

7. Sombras, gradientes, filtros en imágenes y tooltips

A continuación, se presenta el código HTML y las especificaciones CSS que debes implementar:

<div class="card card-shadow">
  <h3>Ejemplo de Sombra</h3>
  <p>Esta tarjeta tiene una sombra.</p>
</div>
<div class="card card-gradient">
  <h3>Ejemplo de Gradiente</h3>
  <p>Este es un fondo con gradiente.</p>
</div>
<h3>Ejemplo de imagen con filtro y sin filtro</h3>
<img src="https://cdn-icons-png.flaticon.com/256/4193/4193347.png" alt="Imagen sin filtro">
<img src="https://cdn-icons-png.flaticon.com/256/4193/4193347.png" alt="Imagen con filtro" class="filtered-image">
<h3>Ejemplo con tooltip</h3>
<div class="tooltip-container">
  <span class="tooltip-text">Mensaje del tooltip</span>
  <p>Este elemento tiene un tooltip</p>
</div>

Instrucciones:

1. Tarjeta con Sombra

Agrega una sombra a la tarjeta.
Establece un borde sólido de 1px de color gris alrededor de la tarjeta.
Ancho de la tarjeta: 300px.
Relleno de 20px.
Radio de borde de 10px.
Margen de 20px.
La sombra debe ser de 5px de desplazamiento en horizontal y vertical, con un desenfoque de 10px y un color RGBA de negro con una opacidad del 30%.

2. Tarjeta con Gradiente

Establece un fondo con gradiente para la tarjeta.
El gradiente debe ser de color #3498db en la parte superior y #1f587d en la parte inferior.
El texto dentro de la tarjeta debe ser de color blanco.

3. Imagen con Filtro y Sin Filtro

Utiliza una imagen (puedes usar esta URL: https://cdn-icons-png.flaticon.com/256/4193/4193347.png).
Agrega una versión de la imagen sin filtro y una versión con filtro.
La versión con filtro debe tener un 80% de brillo y un 120% de contraste.

4. Elemento con Tooltip

Crea un elemento contenedor para el tooltip.
Este elemento debe incluir un texto que dice «Mensaje del tooltip».
Debe haber un párrafo que diga «Este elemento tiene un tooltip».
Cuando se pasa el cursor sobre el elemento contenedor, se debe mostrar el tooltip.
El tooltip debe tener un fondo marrón, texto blanco y un ancho de 120px.
Debe estar centrado horizontalmente en relación al elemento padre.
Debe tener un borde redondeado de 6px y un relleno de 5px.
La posición del tooltip debe estar justo debajo del elemento contenedor con una distancia de 125% y centrada horizontalmente.
La transición debe suavizar la aparición y desaparición del tooltip con una duración de 0.3s.

Solución:

* {
   font-family: Arial, sans-serif;
}
.card{
  width: 300px;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  display: inline-block;
  border: 1px solid grey;
}
/* Ejemplo de sombra en una tarjeta */
.card-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* Ejemplo de gradiente de fondo */
.card-gradient {
  background: linear-gradient(to bottom, #3498db, #1f587d);
  color: white;
}
/* Ejemplo de filtro en imagen */
.filtered-image {
  filter: brightness(80%) contrast(120%);
}
/* Estilo para tooltips */
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: brown;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 125%; /* Posiciona el tooltip bajo del elemento */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}

Ejemplo en CodePen

Ejercicios prácticos CSS Intermedio

¡Invítanos a un café!

Servicios

Suscríbete a la newsletter

Ejercicios prácticos CSS Intermedio

Ejercicios prácticos CSS Intermedio

1. Uso de media queries

2. Botones personalizados con distintos cursores

3. Uso de selectores de atributos en CSS

Ejercicios prácticos CSS Avanzado

4. Contenedor fijo y variable con calc()

5. Propiedades personalizadas en CSS con colores específicos

6. Menú con transiciones y transformaciones

7. Sombras, gradientes, filtros en imágenes y tooltips

¡Invítanos a un café!

4. Contenedor fijo y variable con `calc()`