CSS: Evaluación CSS

CSS 3: Evaluación de conocimiento y ejercicios para dominar el diseño web. Incluye ejemplos prácticos y preguntas clave.

Aprende CSS GRATIS y certifícate

Este módulo está diseñado para evaluar tus conocimientos sobre CSS 3 y proporcionarte ejercicios prácticos que te ayudarán a consolidar tus habilidades en el diseño web. CSS 3 es una de las tecnologías fundamentales para la creación de interfaces de usuario y su dominio es esencial para cualquier desarrollador web.

Evaluación de conocimiento

Para evaluar tu comprensión de CSS 3, te proponemos una serie de preguntas clave que abarcan desde conceptos básicos hasta temas avanzados.

Preguntas de evaluación

  1. ¿Qué es una hoja de estilo en cascada? Una hoja de estilo en cascada (CSS) es un lenguaje que describe la presentación de un documento escrito en HTML o XML.

  2. Explica la diferencia entre margin y padding. Margin se refiere al espacio exterior de un elemento, mientras que padding se refiere al espacio interior, entre el contenido del elemento y su borde.

  3. ¿Cómo se aplica un flexbox en CSS? Para aplicar un flexbox, se debe establecer la propiedad display: flex; en el contenedor padre. Luego, se pueden usar propiedades como justify-content, align-items y flex-direction para controlar la distribución de los elementos hijos.

  4. ¿Qué es una pseudo-clase en CSS? Una pseudo-clase es una palabra clave añadida a un selector que especifica un estado especial del elemento seleccionado. Ejemplo: :hover para cambiar el estilo de un elemento cuando el ratón está sobre él.

Ejercicios prácticos

A continuación, se presentan ejercicios prácticos para reforzar tus conocimientos en CSS 3.

Ejercicio 1: Crear un layout flexible

Crea un contenedor que utilice flexbox para distribuir tres elementos hijos de manera equitativa en el espacio disponible.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Flexbox</title>
<style>
.container {
display: flex;
justify-content: space-around;
border: 1px solid #000;
padding: 10px;
}
.item {
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
</body>
</html>

Ejercicio 2: Aplicar una animación

Crea una animación que cambie el color de fondo de un botón cuando el usuario pase el ratón sobre él.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Animación</title>
<style>
.btn {
background-color: #008CBA;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #005f73;
}
</style>
</head>
<body>
<button class="btn">Hover me</button>
</body>
</html>

Ejercicio 3: Uso de grid layout

Implementa una cuadrícula que contenga cuatro elementos, distribuidos en dos filas y dos columnas.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 10px;
}
.grid-item {
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
</div>
</body>
</html>
Empezar curso de CSS

Lecciones de este módulo de CSS

Lecciones de programación del módulo Evaluación CSS del curso de CSS.

Ejercicios de programación en este módulo de CSS

Evalúa tus conocimientos en Evaluación CSS con ejercicios de programación Evaluación CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.