Quiz: ¿Conoces los fundamentos de CSS? (2025)
¿Eres lo suficientemente front‑end?
Quiz: ¿Conoces CSS?
- CSS moderno? 🤔
- ¿Debería CSS estar en tu currículum??? 🚀
- Opción múltiple. 🤖 … ¿Qué tan difícil puede ser, no?
Selecciona el ÚNICO INVÁLIDO ❌ font-size:
10cx es incorrecto porque cx no es una unidad CSS real. (Al menos al momento de escribir esto.)
Las unidades populares incluyen las familiares px, rem, em.
Las unidades más nuevas son útiles para diseños dinámicos y responsivos.
ch- ancho del carácter0vmin- mínimo del viewportvmax- máximo del viewportvh- altura del viewportvw- ancho del viewport
También existen varias unidades que siempre han existido pero se usan rara vez, como cm para centímetros, mm, in para pulgadas, pt para puntos
¿Puedes encontrar el UN código hex válido 👍?
Los códigos hexadecimales pueden usarse para representar colores en CSS. Llevan el prefijo # y deben contener 3, 4, 6 u 8 dígitos hexadecimales.
El código hex de 3 caracteres es una abreviatura del de 6 caracteres, donde cada carácter se repite. El código de 4 caracteres incluye un canal alfa para transparencia.
Por ejemplo #ABC es lo mismo que #AABBCC, y #ABCD es lo mismo que #AABBCCDD. Para aprender más sobre el manejo de valores hex, echa un vistazo a mi quiz de números de JavaScript.
¿Cuál de estas unidades NO es una unidad CSS válida ❌?
Nuevas unidades como ch, vmin, vmax, vh, vw son bastante útiles para diseños dinámicos/responsivos.
También existen varias unidades que siempre han estado, pero se usan rara vez, como cm para centímetros, mm, in para pulgadas, pt para puntos, pc, cap para el tamaño de las letras mayúsculas, y ex que equivale a la altura de la letra x.
Las unidades más populares incluyen el familiar px para píxeles, em relativo al tamaño de fuente del elemento, y rem que secretamente rinde homenaje a la olvidada banda de los 90 R.E.M. (vale, no en serio, es solo una unidad em relativa que referencia al elemento raíz).
¿Qué selector coincide mejor con el siguiente HTML?
<a id="home" name="home" href="/home">Home</a>La respuesta correcta es a#home[name='home'], que coincide tanto con los atributos id como name. Los selectores CSS distinguen mayúsculas y minúsculas, por lo que #Home no funcionaría, y los espacios implican elementos hijos, lo que no aplica aquí.
El selector :contains() no es un selector CSS estándar, aunque está disponible en algunas bibliotecas JS.
¿Qué selector coincide con el siguiente botón HTML?
<button onclick="openModal()">Contact</button>La respuesta correcta es button[onclick], que selecciona la existencia del atributo onclick.
Nota que :link solo selecciona enlaces href no visitados, ::click no es un pseudo‑elemento válido, y :focus solo selecciona el elemento enfocado.
¿Cuál de estos selectores es inválido?
El selector c > > d {} es inválido porque el combinador de hijo se repite sin un selector entre los dos caracteres >.
Los demás selectores son válidos. Un selector de tipo como c {} es sintácticamente CSS válido aunque c no sea un elemento HTML estándar.
¿Qué selector coincide con el último enlace en el HTML siguiente?
<nav> <a name="home" href="/home">Home</a> <a name="login" href="/login">Login</a> <a name="help" href="/help">Help</a></nav>El selector correcto es a:last-child, que coincide con el último <a> cuando también es el último hijo de su contenedor. nav:nth-child(3) coincidiría con un elemento <nav> que es el tercer hijo de su propio contenedor.
¿Qué selector tendrá prioridad?
El selector a#quote tiene prioridad porque el ID tiene una especificidad mayor que los selectores basados en etiquetas o clases.
¿Cómo puedes centrar “shit” en una caja?
Usar text-align: center; es la forma correcta de centrar texto en un elemento de bloque. Las propiedades align se usan en diseños flexbox, y margin: 0 auto; se usa para centrar elementos de bloque horizontalmente.
La propiedad align-content se usa en diseños grid, y text-content no es una propiedad CSS válida.
¿Cómo centras el contenido verticalmente dentro de un contenedor de bloque en el diseño de flujo moderno?
Usar align-content es la forma moderna de centrar verticalmente el contenido de un contenedor de bloque en el diseño de flujo.
Las propiedades align-items y justify-content se usan para diseños flexbox y grid, pero no para flujo.
Tanto margin: 0 auto; como margin: auto; centran un elemento de bloque horizontalmente, pero no verticalmente.
¿Cuál es el tamaño en píxeles del texto del enlace <a> en el siguiente HTML?
<body style="font-size: 40px !important;"> <nav style="font-size: 50%;"> <a style="font-size: 25%;">HOME</a> </nav></body>El font-size para <a> se calcula como 5px: 40px (body) * 50% (nav) = 20px, luego 20px * 25% = 5px.
¿Cuál será el tamaño en píxeles de 1.2rem para el enlace “HOME” en el siguiente HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2rem;">HOME</a> </body></html>1.2rem se traduce a 12px porque las unidades rem hacen referencia al tamaño de fuente raíz o del <html>, establecido aquí en 10px.
Similar a la pregunta anterior, ¿cuál será el tamaño en píxeles de 1.2em para el enlace “HOME” en el siguiente HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2em;">HOME</a> </body></html>1.2em se traduce a 24px porque las unidades em hacen referencia al tamaño de fuente heredado, establecido aquí en 20px.
¿Qué selector tiene la menor especificidad?
:where(.card) .title tiene la menor especificidad. La pseudo‑clase :where() y todo lo que contiene aporta 0-0-0, así que solo cuenta .title. :is(.card) .title mantiene la especificidad de .card, .card .title tiene dos clases, y #card .title incluye un ID.