Test de HTML y CSS: 24 preguntas para comprobar lo que sabes

¿Qué hace la línea <!doctype html> al principio de una página?

¿Cuál de estos fragmentos está bien anidado?

Quieres poner el CSS en el mismo archivo que el HTML. ¿Dónde va?

¿Cuántos espacios se ven entre «Hola» y «mundo»?

<p>Hola        mundo</p>

Estás en blog/articulo.html y quieres mostrar img/foto.jpg, que está en la carpeta de al lado (las dos dentro de la misma raíz). ¿Qué ruta relativa usas?

¿Qué alt le pones a una imagen puramente decorativa, como una línea de adorno?

¿Cuántos elementos <main> visibles puede tener una página?

Un <div onclick="…"> hace de botón. ¿Qué pasa si alguien navega con el teclado, sin ratón?

¿Qué elemento usas para una noticia completa que se entiende por sí sola?

Pulsas «Sí» y luego «No». ¿Cuántas opciones quedan marcadas?

<label><input type="radio" name="si"> Sí</label>
<label><input type="radio" name="no"> No</label>

¿Qué hace este botón al pulsarlo?

<form action="/guardar">
  <input name="nombre">
  <button>Vista previa</button>
</form>

Con <input type="email" required>, ¿acepta el navegador el valor ana@ejemplo (sin punto ni dominio)?

¿De qué color sale el texto?

<style>
  #aviso { color: green; }
  p.alerta { color: red; }
</style>
<p id="aviso" class="alerta">Texto</p>

¿De qué color sale el texto?

<style>
  p { color: red; }
  p { color: blue; }
</style>
<p>Texto</p>

¿De qué color sale el texto?

<style>
  :where(#t) { color: red; }
  p { color: blue; }
</style>
<p id="t">Texto</p>

¿Cuántos píxeles de ancho ocupa la caja en pantalla?

<style>
  div { width: 200px; padding: 20px; border: 5px solid; }
</style>
<div>Caja</div>

Un párrafo tiene margin-bottom: 30px y el siguiente, margin-top: 20px. ¿Cuánto espacio queda entre los dos?

¿Qué tamaño de letra tiene «adentro» si la raíz mide 16 px?

<style>
  .t { font-size: 1.5em; }
</style>
<div class="t">afuera <span class="t">adentro</span></div>

En un contenedor display: flex en fila, ¿qué propiedad centra los elementos en vertical?

¿Cuántos píxeles mide la segunda columna?

<style>
  .g { display: grid; grid-template-columns: 1fr 3fr; width: 400px; }
</style>
<div class="g"><div>A</div><div>B</div></div>

¿Cuántas columnas salen en este contenedor de 500 píxeles?

<style>
  .g {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 500px;
  }
</style>
<div class="g"><div>1</div><div>2</div><div>3</div><div>4</div></div>

En una ventana de 720 píxeles de ancho, ¿qué tamaño tiene el título?

<style>
  h1 { font-size: clamp(1rem, 10vw, 3rem); }
</style>
<h1>Título</h1>

En un celular de 375 píxeles de ancho, ¿de qué color sale el texto?

<style>
  @media (max-width: 40rem) {
    p { color: red; }
  }
  p { color: blue; }
</style>
<p>Texto</p>

¿Qué propiedad convierte un elemento en la referencia de las reglas @container de sus hijos?