Profe Johnny
Ejercicios · Grupo 1 de 6

Selectores y modelo de caja

Practica cómo apuntar elementos y controlar su tamaño real. Intenta resolver cada ejercicio en el editor antes de revelar la solución.

1 Ejercicio 1 Básico

Crea un selector por clase '.aviso' que ponga fondo amarillo claro.

ejercicio-1
Ver solución sugerida
solución 1
2 Ejercicio 2 Básico

Crea un selector por id '#logo' que le dé tamaño de fuente 24px.

ejercicio-2
Ver solución sugerida
solución 2
3 Ejercicio 3 Básico

Usa un selector descendiente para que todos los <a> dentro de <nav> sean blancos.

ejercicio-3
Ver solución sugerida
solución 3
4 Ejercicio 4 Básico

Aplica box-sizing: border-box a todos los elementos con el selector universal.

ejercicio-4
Ver solución sugerida
solución 4
5 Ejercicio 5 Intermedio

Dale a una caja width 200px, padding 20px y observa su ancho total sin border-box.

ejercicio-5
Ver solución sugerida
solución 5
6 Ejercicio 6 Básico

Usa margin para separar dos cajas 20px una de otra.

ejercicio-6
Ver solución sugerida
solución 6
7 Ejercicio 7 Intermedio

Usa un selector de atributo para estilizar inputs de tipo email.

ejercicio-7
Ver solución sugerida
solución 7
8 Ejercicio 8 Intermedio

Centra una caja horizontalmente usando margin: 0 auto y un width fijo.

ejercicio-8
Ver solución sugerida
solución 8
9 Ejercicio 9 Avanzado

Usa el selector hijo directo (>) para estilizar solo los li de primer nivel.

ejercicio-9
Ver solución sugerida
solución 9
10 Ejercicio 10 Avanzado

Crea 2 cajas con distinto padding y border, y compara su tamaño final con border-box activado.

ejercicio-10
Ver solución sugerida
solución 10