HTML y CSS
Test de CSS básico
Aplica CSS en 50 situaciones sobre selectores, cascada, especificidad, modelo de caja, tipografía, display, posición y variables.
Cada intento mezcla preguntas y respuestas para evitar patrones memorizables.
Cargando preguntas…
Qué vas a practicar
Este banco convierte las reglas de CSS en decisiones de depuración y mantenimiento. Incluye selectores, cascada, especificidad, herencia, modelo de caja, unidades, tipografía, display, posicionamiento, pseudoclases y propiedades personalizadas.
- Leer selectores y relaciones entre elementos.
- Resolver conflictos mediante cascada, especificidad y orden de aparición.
- Calcular contenido, padding, borde y margen.
- Elegir unidades, valores de display, posicionamiento y funciones CSS básicas.
Preguntas de ejemplo
Los ejemplos siguientes pertenecen al banco interactivo y conservan exactamente la misma respuesta y explicación.
1Para dirigir el estilo correctamente, ¿qué selector aplica estilos a todos los elementos <p>?
Respuesta: p
Explicación: Un selector de tipo usa el nombre del elemento y coincide con todos los elementos de ese tipo. El prefijo del selector es significativo: punto para clase, almohadilla para id y corchetes para atributos.
2¿Qué pseudo-clase ayuda a mostrar foco cuando el navegador determina que debe ser visible?
Respuesta: :focus-visible
Explicación: :focus-visible permite diseñar un indicador de foco apropiado, especialmente para navegación con teclado. El selector responde a una condición del elemento y no crea una clase nueva en el HTML.
3En el modelo de caja, ¿qué zona rodea inmediatamente al contenido?
Respuesta: padding
Explicación: El padding es el espacio interior entre el contenido y el borde. Margin queda fuera del borde y separa cajas; padding pertenece al interior y rodea el contenido.
4Para controlar ese comportamiento, ¿qué propiedad controla la distancia entre líneas de texto?
Respuesta: line-height
Explicación: line-height define la altura usada por cada línea y afecta a la legibilidad del bloque. line-height controla la caja de línea; font-size modifica el tamaño de los glifos y letter-spacing el espacio entre caracteres.
5¿Respecto de qué se posiciona normalmente un elemento absolute?
Respuesta: Del ancestro posicionado más cercano o del bloque contenedor inicial
Explicación: absolute busca el ancestro relevante cuyo position no sea static; si no existe, usa el bloque contenedor inicial.
6Para controlar ese comportamiento, ¿qué propiedad dibuja una línea alrededor de una caja sin ocupar espacio en el modelo de caja?
Respuesta: outline
Explicación: outline se dibuja fuera del borde y no modifica las dimensiones ni el flujo del elemento. Cada propiedad actúa en una capa distinta de la caja, por lo que no son sustitutos equivalentes.
Cómo aprovechar la práctica
Antes de elegir, identifica qué regla participa, qué valor llega al elemento y qué parte del modelo de caja o del flujo se está modificando. En los casos de conflicto, compara origen, importancia, capa, especificidad y orden en lugar de memorizar una única fórmula.
Fuentes y alcance
Las preguntas se han revisado con CSS Snapshot 2026 del W3C y las referencias actuales de selectores, cascada, modelo de caja y propiedades personalizadas. Revisión editorial: 19 de agosto de 2026.