Ejercicios de práctica de CSS

1. Selectores y Pseudoclases

Crea un archivo HTML con una lista de elementos (<ul>) y aplica diferentes estilos a los elementos <li> usando clases. Cambia el color del texto, tamaño de fuente, y agrega un borde.

Ver el ejercicio

Crea un botón que cambie de color cuando el cursor pase sobre él usando la pseudoclase :hover.

Ver el ejercicio

Aplica la pseudoclase :focus a un campo de formulario y cambia el color del borde cuando el campo esté enfocado.

Ver el ejercicio

Aplica diferentes colores a los enlaces en sus diferentes estados (:hover, :active, :visited).

Ver el ejercicio

2. Propiedades Básicas de Estilo

Crea un <div> con un fondo de color y un texto en su interior. Luego, otro con el fondo utilizando una imagen y ajusta sus propiedades de repetición y posición.

Ver el ejercicio

Crea un <div> con un borde de 2px de color rojo y un margen de 20px. Dentro del div, coloca un párrafo con un tamaño de fuente de 18px.

Ver el ejercicio

Aplica una fuente personalizada a un párrafo, cambia el tamaño de letra, y agrega un espaciado entre líneas de texto.

Ver el ejercicio

Aplica una transformación a un <div>, como rotarlo 45 grados, usando la propiedad transform.

Ver el ejercicio

3. Media Queries y Diseño Responsivo

Crea un archivo CSS y una página HTML con un diseño que cambie cuando el ancho de la pantalla sea menor a 768px (cambia el tamaño de la fuente a 14px).

Ver el ejercicio

Usa una media query para cambiar un diseño de 2 columnas a 1 columna en pantallas pequeñas.

Ver el ejercicio

4. Flexbox

Crea un contenedor con varios elementos (<div>) dentro y usa Flexbox para distribuirlos de forma horizontal y centrar su contenido.

Ver el ejercicio

Crea un contenedor de 3 divs y usa Flexbox para alinear los elementos en la parte inferior del contenedor.

Ver el ejercicio

Usa Flexbox para centrar un <div> tanto horizontal como verticalmente dentro de otro <div>.

Ver el ejercicio

Usa Flexbox para crear una barra de navegación con elementos distribuidos horizontalmente en pantallas grandes, y que se apilen verticalmente en pantallas pequeñas.

Ver el ejercicio

5. CSS Grid

Crea un layout de dos columnas usando CSS Grid. La primera columna debe ocupar el 30% del espacio y la segunda el 70%. Asegúrate de que el diseño sea responsivo y se adapte a pantallas más pequeñas.

Ver el ejercicio

Usa CSS Grid para crear un diseño de 3 filas y 3 columnas con elementos en una cuadrícula de imágenes.

Ver el ejercicio

Crea una cuadrícula en CSS Grid con cuatro columnas y dos filas, coloca seis elementos y cambia la dirección para que el orden visual sea del 6 al 1.

Ver el ejercicio

Crea un diseño de página con un encabezado, contenido principal, barra lateral y pie de página utilizando CSS Grid.

Ver el ejercicio

6. Técnicas Avanzadas

Crea un archivo style.css y luego usa @import para cargar otro archivo CSS con reglas adicionales para los botones.

Ver el ejercicio

Aplica una sombra a un <div> y usa la propiedad box-shadow para crear un efecto de profundidad.

Ver el ejercicio

Aplica una transición de 0.3s al cambiar el color de fondo de un <div> cuando se pasa el cursor sobre él.

Ver el ejercicio

Crea una animación de texto utilizando @keyframes para hacer que el texto cambie de color y se desplace.

Ver el ejercicio

Crea un formulario con campos de entrada que tengan bordes redondeados y un cambio de color en el borde cuando el campo esté enfocado.

Ver el ejercicio

Proximamente más ejercicios...