Saltar al contenido
css.test.css · devschool

Retos de CSS

86 preguntas ordenadas como el curso de CSS. Hazlas en orden o salta al tema que quieras repasar.

devschool $ 0 aciertos de 0 respondidas

¿Qué es CSS?

¿Te atascas? Repasa la lección ¿Qué es CSS?.

[CSS] En la regla p { color: red; }, ¿qué es color?

[CSS] ¿Cuál es la forma recomendada de añadir CSS a una web?

Selectores

¿Te atascas? Repasa la lección Selectores.

[CSS] ¿Qué selector elige todos los elementos con class="aviso"?

[CSS] ¿Qué selecciona p .aviso (con espacio)?

[CSS] ¿Qué selecciona h1, h2?

Cascada y herencia

¿Te atascas? Repasa la lección Cascada y herencia.

[CSS] ¿De qué color es el párrafo? 
<p id="intro" class="texto">Hola</p>

#intro { color: red; }
.texto { color: blue; }
p { color: green; }

[CSS] ¿Qué selector es más específico?

[CSS] ¿Cuál de estas propiedades se hereda?

[CSS] Dos reglas con la misma especificidad dan distinto color a un elemento. ¿Cuál gana?

Unidades

¿Te atascas? Repasa la lección Unidades.

[CSS] Si el <html> tiene font-size: 16px, ¿cuánto es 2rem?

[CSS] ¿Qué unidad es relativa al tamaño de la ventana?

[CSS] ¿Qué hace clamp(1rem, 4vw, 2rem)?

Colores y fondos

¿Te atascas? Repasa la lección Colores y fondos.

[CSS] ¿Qué color es #ff0000?

[CSS] ¿Qué diferencia hay entre opacity: 0.5 y background: rgb(0 0 0 / 0.5)?

[CSS] Al pasar el ratón por el botón, ¿de qué color queda el borde? 
.boton {
  color: #2d6cdf;
  border: 2px solid currentColor;
}
.boton:hover {
  color: #8e44ad;
}

[CSS] Según las pautas WCAG (nivel AA), ¿qué contraste mínimo necesita el texto normal sobre su fondo?

Bordes y sombras

¿Te atascas? Repasa la lección Bordes y sombras.

[CSS] ¿Por qué esta regla no muestra ningún degradado? 
.cabecera {
  background-color: linear-gradient(to right, #2d6cdf, #8e44ad);
}

[CSS] Tienes un botón rectangular de 200 x 40 px. ¿Qué border-radius lo convierte en una píldora con los extremos perfectamente redondos?

[CSS] En esta regla, ¿qué capa se ve encima? 
.portada {
  background-image:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
    url("portada.jpg");
}

[CSS] Quieres marcar el foco de un botón sin que al aparecer se mueva nada de la página. ¿Qué usas?

Tipografía

¿Te atascas? Repasa la lección Tipografía.

[CSS] ¿Qué font-family es más correcta?

[CSS] ¿Qué interlineado se recomienda para los párrafos?

[CSS] Quieres que un título largo ocupe una sola línea y termine en "…". ¿Qué falta en esta regla? 
.titulo-tarjeta {
  overflow: hidden;
  text-overflow: ellipsis;
}

[CSS] Muestras comentarios que escriben los usuarios y quieres respetar sus saltos de línea, pero que las líneas largas se partan al llegar al borde. ¿Qué valor de white-space usas?

Fuentes web

¿Te atascas? Repasa la lección Fuentes web.

[CSS] ¿Qué hace font-display: swap dentro de un @font-face?

[CSS] Con este CSS, ¿qué pasa en un <strong> dentro de un párrafo? 
@font-face {
  font-family: "Lora";
  src: url("lora-regular.woff2") format("woff2");
  font-weight: 400;
}
p { font-family: "Lora", Georgia, serif; }

[CSS] ¿Qué indica font-weight: 100 900; dentro de un @font-face?

[CSS] ¿Por qué se recomienda clamp(1.75rem, 1rem + 3vw, 3rem) en lugar de font-size: 5vw para un titular?

Modelo de caja

¿Te atascas? Repasa la lección Modelo de caja.

[CSS] ¿Qué propiedad añade espacio entre el contenido y el borde de una caja?

[CSS] Una caja tiene width: 200px, padding: 20px y border: 5px. Sin box-sizing, ¿cuánto mide de ancho?

[CSS] ¿Qué hace box-sizing: border-box?

[CSS] ¿Qué parte de la caja es siempre transparente?

display y overflow

¿Te atascas? Repasa la lección display y overflow.

[CSS] ¿Qué diferencia hay entre display: none y visibility: hidden?

[CSS] Pones width: 200px a un <a> y no cambia de tamaño. ¿Por qué?

Posicionamiento

¿Te atascas? Repasa la lección Posicionamiento.

[CSS] Un elemento con position: absolute, ¿respecto a qué se coloca?

[CSS] ¿Qué valor de position hace que una cabecera se quede pegada arriba al hacer scroll, dentro de su contenedor?

Flexbox

¿Te atascas? Repasa la lección Flexbox.

[CSS] Con display: flex, ¿qué propiedad centra los hijos en horizontal (en una fila)?

[CSS] ¿Qué propiedad hace que los hijos de un contenedor flex bajen a otra línea si no caben?

[CSS] ¿Dónde se escribe display: flex?

[CSS] El contenedor mide 400px de ancho y no tiene gap ni padding. ¿Qué ancho tendrá .b? 
.fila { display: flex; width: 400px; }
.a, .c { flex: 1; }
.b { flex: 2; }

[CSS] En una barra de navegación con display: flex, ¿qué hace margin-left: auto en el último enlace? 
.nav { display: flex; gap: 16px; }
.nav .salir { margin-left: auto; }

Grid

¿Te atascas? Repasa la lección Grid.

[CSS] ¿Qué crea este código? 
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

[CSS] ¿Qué significa la unidad fr en Grid?

[CSS] ¿Qué hace grid-column: 1 / -1?

[CSS] El contenedor mide 700px y tiene gap: 16px. ¿Cuántas columnas se crean? 
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

[CSS] ¿Qué ocurre con este grid-template-areas? 
.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "cabecera cabecera"
    "menu contenido";
}
header { grid-area: cabecera; }

Responsive

¿Te atascas? Repasa la lección Responsive.

[CSS] ¿Cuándo se aplican estos estilos? 
@media (max-width: 600px) {
  .menu { display: none; }
}

[CSS] ¿Qué significa "mobile first"?

[CSS] ¿En qué anchos de ventana se oculta .lateral? 
@media (600px <= width < 900px) {
  .lateral { display: none; }
}

[CSS] Quieres que el efecto :hover de las tarjetas solo se aplique en dispositivos con ratón. ¿Qué media query es la adecuada?

Imágenes en CSS

¿Te atascas? Repasa la lección Imágenes en CSS.

[CSS] Una foto apaisada se ve aplastada en una miniatura cuadrada. ¿Qué la arregla sin deformarla? 
.miniatura {
  width: 200px;
  height: 200px;
}

[CSS] ¿Por qué se prefiere img { max-width: 100%; } en lugar de img { width: 100%; }?

[CSS] Tienes un logo PNG con fondo transparente y quieres una sombra que siga su silueta. ¿Qué usas?

[CSS] ¿Qué imagen de una tienda online debería ir en un <img> y no como background-image?

Listas y tablas

¿Te atascas? Repasa la lección Listas y tablas.

[CSS] Has puesto list-style: none a un menú, pero los enlaces siguen desplazados unos 40 px a la derecha. ¿Qué falta? 
.menu {
  list-style: none;
  display: flex;
}

[CSS] ¿Qué numeración muestran los <h2> de la página con este CSS? 
body { counter-reset: apartado; }
h2 { counter-increment: apartado; }
h2::before { content: counter(apartado) ". "; }

[CSS] Aplicas una regla de filas cebra y otra de hover a las filas de una tabla, pero el hover no se nota en las filas pares. ¿Por qué? 
tbody tr:hover { background: #e8eefb; }
tbody tr:nth-child(even) { background: #f3f5f9; }

[CSS] ¿Cuál es la forma más sencilla de que una tabla ancha no desborde la página en el móvil?

Formularios

¿Te atascas? Repasa la lección Formularios.

[CSS] El texto que escribes en los <input> se ve más pequeño y con otra fuente que el resto de la página. ¿Qué regla lo soluciona?

[CSS] Con esta regla, los campos obligatorios aparecen en rojo nada más cargar la página. ¿Qué pseudoclase evita ese efecto? 
input:invalid {
  border-color: #d62839;
}

[CSS] Solo quieres que las casillas de tu formulario sean naranjas en lugar de azules. ¿Qué es lo más sencillo y accesible?

[CSS] En un formulario de dos columnas con grid, ¿qué hace esta regla en el campo de dirección? 
.formulario { display: grid; grid-template-columns: 1fr 1fr; }
.ancho { grid-column: 1 / -1; }

Variables CSS

¿Te atascas? Repasa la lección Variables CSS.

[CSS] ¿De qué color es el fondo de cada botón? 
:root { --principal: blue; }
.ofertas { --principal: orange; }
.boton { background: var(--principal); }

<!-- HTML -->
<button class="boton">A</button>
<section class="ofertas">
  <button class="boton">B</button>
</section>

[CSS] ¿Qué ancho tiene .barra? 
.barra {
  --tamanio: 200;
  width: var(--tamanio)px;
}

[CSS] ¿Qué color de texto tiene el párrafo si en ningún sitio se ha declarado --aviso? 
p { color: var(--aviso, var(--texto, green)); }
:root { --texto: #333; }

[CSS] ¿Qué pueden hacer las variables CSS (--var) que las variables de Sass ($var) no pueden?

Animaciones

¿Te atascas? Repasa la lección Animaciones.

[CSS] ¿Qué propiedades conviene animar para que las animaciones vayan fluidas?

[CSS] ¿Dónde se escribe transition para que funcione al entrar y al salir del :hover?

CSS moderno

¿Te atascas? Repasa la lección CSS moderno.

[CSS] ¿Qué elemento recibe el borde rojo? 
form:has(input:invalid) {
  border: 2px solid red;
}

[CSS] Un <p class="nota"> está en la página. ¿De qué color sale? 
:where(#principal, p) { color: red; }
.nota { color: blue; }
p { color: green; }

[CSS] ¿Qué selector genera este anidamiento nativo? 
.boton {
  &:hover {
    background: navy;
  }
}

[CSS] Esta container query no se aplica nunca. ¿Por qué? 
.lateral { width: 500px; }

@container (width >= 400px) {
  .producto { display: flex; }
}

Organizar el CSS

¿Te atascas? Repasa la lección Organizar el CSS.

[CSS] Siguiendo BEM, ¿cuál es el nombre correcto para el botón de una tarjeta en su versión grande?

[CSS] ¿Para qué sirve esta regla de un reset moderno? 
input, button, textarea, select {
  font: inherit;
}

[CSS] En las DevTools, una declaración aparece tachada en el panel de estilos. ¿Qué significa?

[CSS] ¿Por qué se recomienda estilar con clases en lugar de con ids?

Proyecto: landing

¿Te atascas? Repasa la lección Proyecto: landing.

[CSS] Con mobile first, ¿cómo quedan las tarjetas en un móvil de 390px? 
.tarjetas { display: grid; gap: 20px; }

@media (width >= 700px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}

[CSS] ¿Qué ancho tiene .contenedor en una pantalla de 1400px? 
.contenedor {
  width: min(100% - 32px, 1100px);
  margin-inline: auto;
}

[CSS] Quieres que el fondo de color de cada sección llegue a los bordes de la pantalla, pero el texto quede centrado con un ancho máximo. ¿Qué estructura usas?

[CSS] En un formulario con display: grid, el botón de enviar se estira a todo el ancho. ¿Qué lo evita? 
.formulario { display: grid; gap: 8px; }

Bootstrap

¿Te atascas? Repasa la lección Bootstrap.

[CSS] ¿Dónde debe ir todo el contenido en Bootstrap?

[CSS] ¿Cómo desactivas de verdad un botón de Bootstrap?

Bootstrap: rejilla

¿Te atascas? Repasa la lección Bootstrap: rejilla.

[CSS] En Bootstrap, ¿en cuántas partes se divide cada fila?

[CSS] ¿Qué hace class="col-12 col-md-6"?

Bootstrap: componentes

¿Te atascas? Repasa la lección Bootstrap: componentes.

[CSS] ¿Qué clase hace que una imagen se adapte al ancho de su columna?

[CSS] ¿Qué clase se añade a un <input> de texto en un formulario de Bootstrap?