Dan Levy

Quiz: ¿Conoces los fundamentos de CSS? (2025)

¿Eres lo suficientemente front‑end?

Quiz: ¿Conoces CSS?

1. 

Calentamiento: Fuentes

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ácter 0
  • vmin - mínimo del viewport
  • vmax - máximo del viewport
  • vh - altura del viewport
  • vw - 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

2. 

Calentamiento: Colores

¿Puedes encontrar el ÚNICO código hexadecimal 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.

3. 

Calentamiento: Unidades

¿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).

4. 

Selector: Fundamentos

¿Qué selector coincide mejor con el siguiente HTML?

<a id="home" name="home" href="/home">Home</a>

La respuesta es a#home[name='home']: selecciona el enlace por su tipo, ID y atributo name. En HTML en modo estándar, los valores de ID distinguen mayúsculas y minúsculas, de modo que #Home no coincide con home; los nombres de etiquetas HTML no distinguen mayúsculas y minúsculas. El espacio en a [id='home'] es un combinador de descendientes: buscaría un elemento dentro del enlace, no el propio enlace.

:contains() no es un selector CSS estándar, aunque algunas bibliotecas JavaScript lo ofrecen.

5. 

Selector: Fundamentos

¿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.

6. 

Selector: Fundamentos

¿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.

7. 

Selector: Fundamentos

¿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.

8. 

Selector: Especificidad

¿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.

9. 

Diseños: Centrando

¿Cómo puedes centrar “shit” en una caja?

text-align: center; centra horizontalmente el texto y otro contenido en línea dentro de un bloque. No existe una propiedad CSS align ni text-content. align-content distribuye o alinea contenido en diseños compatibles, y margin: 0 auto; puede centrar horizontalmente un bloque con ancho limitado; ninguna sustituye a text-align para esta pregunta.

10. 

Diseños: Centrando

¿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.

11. 

Diseños: Unidades

¿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.

12. 

Unidades: REM

¿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.

13. 

Unidades: EM

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.

14. 

Selector: Especificidad

¿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.

Loading comments...