▷Ejemplos de CSS y ejercicios resueltos

« Anterior Siguiente »

Ahora que conocemos el lenguaje de estilos CSS, es momento de aplicar todo lo aprendido; para ello veremos ejemplos aplicativos y además varios ejercicios y problemas con sus respectivas soluciones.

Ver índice del contenido

Ejemplos de CSS

Cada ejercicio será planteado o explicado según sea el caso al principio, se describirán las características que se desean obtener mediante CSS y si la pregunta lo requiere se tomarán notas y aclaraciones al final de cada ejercicio.

Primer Ejercicio resuelto de propiedad z-index

Ya que venimos de haber terminado la lección de la propiedad z-index, resolveremos el ejercicio que nada más lo vimos como gráfico, para quienes se suman recientemente les cuento; se trata de tres bloques <div> con sus respectivos z-index, el bloque 2 contiene tres bloques hijo dentro de ella y también están con sus respectivas propiedades z-index declaradas. Veamos el cogido y resultado.

Se busca demostrar que el bloque 2 es un bloque padre independiente y que las propiedades z-index de sus hijos no es influenciada por los bloques 1 y 3, sin embargo el padre 2 si es influenciado, sus hijos no. Veamos el código y resultado.

Código HTML

<div class="bloque1">BLOQUE 1</div>

<div class="bloque2">BLOQUE 2
<div class="hijo1">Hijo 1 de bloque 2</div>
<div class="hijo2">Hijo 2 de bloque 2</div>
<div class="hijo3">hijo 3 de bloque 3</div>

</div>
<div class="bloque3">BLOQUE 3</div>

Código CSS

div {
 
  position: absolute;
border:1px solid #41729c;
}
div.bloque1 {
  background-color: #ebf0f9;
width:353px;
height:113px;
  top: 95px;
  left:56px;
z-index:800;
}
div.bloque2 {
  background-color: #c5e0b4;
width:297px;
height:387px;
  top: 40px;
  left: 81px;
z-index: 40;
}
div.bloque3 {
  background-color: #ffe699;
width:397px;
height:116px;
  top: 374px;
  left: 20px;
z-index: 20;
}

div.bloque2 div.hijo1 {
  background-color: #5b9ad5;
width:266px;
height:98px;
  top: 120px;
  left: 15px;
z-index:90;
}

div.bloque2 div.hijo2 {
  background-color: #d0cece;
width:143px;
height:296px;
  top: 33px;
  left:126px;
z-index:30;
}


div.bloque2 div.hijo3 {
  background-color: #ffb9b9;
width:176px;
height:99px;
  top: 278px;
  left: 105px;
z-index: 10;
}

Resultado:

Te recomendamos leer: Estilo para listas en CSS

Código ejecutable

A continuación tienes el mismo ejemplo, pero con el código HTML y CSS en el mismo documento, por lo tanto puedes ejecutar mediante el icono de reproducción y verás que el resultado es la misma que se muestra en la imagen. Observa que el código CSS se incrustó mediante la etiqueta <style>.

<div class="bloque1">BLOQUE 1</div>

<div class="bloque2">BLOQUE 2
<div class="hijo1">Hijo 1 de bloque 2</div>
<div class="hijo2">Hijo 2 de bloque 2</div>
<div class="hijo3">hijo 3 de bloque 3</div>

</div>
<div class="bloque3">BLOQUE 3</div>

<style>
div {
 
  position: absolute;
border:1px solid #41729c;
}
div.bloque1 {
  background-color: #ebf0f9;
width:353px;
height:113px;
  top: 95px;
  left:56px;
z-index:800;
}
div.bloque2 {
  background-color: #c5e0b4;
width:297px;
height:387px;
  top: 40px;
  left: 81px;
z-index: 40;
}
div.bloque3 {
  background-color: #ffe699;
width:397px;
height:116px;
  top: 374px;
  left: 20px;
z-index: 20;
}

div.bloque2 div.hijo1 {
  background-color: #5b9ad5;
width:266px;
height:98px;
  top: 120px;
  left: 15px;
z-index:90;
}

div.bloque2 div.hijo2 {
  background-color: #d0cece;
width:143px;
height:296px;
  top: 33px;
  left:126px;
z-index:30;
}


div.bloque2 div.hijo3 {
  background-color: #ffb9b9;
width:176px;
height:99px;
  top: 278px;
  left: 105px;
z-index: 10;
}

</style>

Segundo Ejercicio de modelo de cajas

Crea un bloque con las siguientes características: Ancho de 400px, altura de 150px, color de fondo a tu elección, borde de 4px con puntos, color a tu elección, margen de 50px, relleno de 40px y que contenga una frase al medio que diga:»¡Me encanta CSS!» colócale el mejor tipo de letra, tamaño y además mediante CSS has que sea pura mayúscula. ¡Adelante!

Código HTML

<div><p>¡Me encanta CSS!</p></div>

Código CSS

div {
  width:400px;
  height:150px;
  background-color:#ad6be3;
  border: 4px dotted;
  padding:40px;
  margin:50px;
  display: inline-table;
  text-align:center;
}
div p {
 display: table-cell;
 vertical-align:middle;
 font-family: impact;
 font-size:32px;
 text-transform: uppercase;
 color:#330757;}

Resultado:

Ejercicios Propuestos

1. Ejercicio 1: Círculo con Estilos Personalizados

Crea un div con forma de círculo.
El círculo debe tener un diámetro de 250 píxeles.
Aplica un borde doble de 5 píxeles en color naranja y un color de fondo azul.
Pista: Usa border-radius: 50% para obtener la forma circular.

Te recomendamos leer: Personalizando el cursor del ratón con CSS

2. Ejercicio 2: Párrafo con Espaciado y Bordes

Diseña un párrafo (<p>) con los siguientes estilos:
- Margen de 20 píxeles y relleno interior de 14 píxeles.
- Un borde de 2 píxeles sólido de color gris oscuro.
- Un radio de borde de 10 píxeles para suavizar las esquinas.
Pista: Para obtener los bordes redondeados, utiliza border-radius: 10px;.

3. Ejercicio 3: Botón con Estilo Hover

Crea un botón (<button>) con los siguientes estilos:
- Fondo rojo y texto en mayúsculas.
- Tipografía Helvetica o Arial.
- Cuando el ratón pase sobre el botón, el color de fondo debe cambiar a verde.
Pista: Usa :hover para definir el efecto cuando el ratón pase sobre el botón.

4. Ejercicio 4: Lista Ordenada Personalizada

Crea una lista ordenada (<ol>) con tres elementos (<li>):
- Establece el color del texto en azul.
- Cambia el tipo de numeración a números romanos en mayúscula (list-style-type: upper-roman;).
- Aplica un margen de 10 píxeles a cada elemento de la lista.
Extra: Cambia el color del texto a verde cuando el ratón pase sobre cada elemento de la lista.

5. Ejercicio 5: Tabla con Bordes y Alineación

Diseña una tabla con 3 filas y 2 columnas (<table>, <tr>, <td>).
Aplica un borde de 1 píxel sólido negro a cada celda.
Agrega un espaciado interior de 10 píxeles a cada celda.
Centra el texto dentro de cada celda vertical y horizontalmente.
Pista: Usa text-align: center; y vertical-align: middle;.

6. Ejercicio 6: Imagen con Borde y Espaciado

Inserta una imagen y aplícale los siguientes estilos:
- Un borde sólido de 3 píxeles en color azul oscuro.
- Espaciado de 20 píxeles alrededor de la imagen utilizando margin.
- Extra: Aplica un borde redondeado de 5 píxeles.

Te recomendamos leer: Qué es CSS e Introducción a CSS

7. Ejercicio 7: Caja con Texto Centrado

Crea un div que simule una tarjeta de presentación con los siguientes estilos:
- Fondo gris claro y texto centrado dentro de la caja.
- Ancho de 300 píxeles y altura de 150 píxeles.
- Borde de 2 píxeles sólido negro.
- Pista: Para centrar el texto horizontal y verticalmente, puedes usar text-align: center; y padding.

8. Ejercicio 8: Menú de Navegación Horizontal

Diseña un menú de navegación con tres enlaces (<a>) usando estilos CSS.
- Aplica un color de fondo azul claro a los enlaces y un color de texto blanco.
- Añade un margen de 10 píxeles entre los enlaces y un relleno de 15 píxeles.
- Cuando el ratón pase sobre cada enlace, el color de fondo debe cambiar a azul oscuro.
- Pista: Usa display: inline-block para que los enlaces se alineen horizontalmente.

Estos ejercicios te permitirán practicar conceptos básicos de CSS, como bordes, espaciados, alineación de texto, estilo de listas, y efectos hover, sin utilizar propiedades avanzadas de CSS3.