//
Entrevistas Técnicas
50 Preguntas de Entrevista HTML & CSS
Espacio Publicitario — Parte Superior
-
01.¿Cuál es la diferencia entre HTML y HTML5?HTML5 es la versión más moderna. Añade etiquetas semánticas (
<article>,<section>,<nav>…), soporte nativo para audio/video, la API Canvas, Local Storage y mucho más. Ya no necesitas Flash ni plugins de terceros. -
02.¿Qué es la semántica en HTML y por qué importa?Usar etiquetas con significado (
<main>,<footer>,<aside>) en lugar de solo<div>. Mejora la accesibilidad para lectores de pantalla y el SEO porque los buscadores entienden la estructura de tu página. -
03.¿Qué hace el atributo
alten una imagen?Describe el contenido de la imagen cuando no carga o cuando un lector de pantalla la procesa. Es obligatorio para la accesibilidad (WCAG) y también ayuda al SEO de imágenes. -
04.¿Cuál es la diferencia entre
idyclass?iddebe ser único en toda la página y se usa para identificar un elemento específico.classpuede estar en múltiples elementos y sirve para aplicar estilos reutilizables. En CSS,idtiene mayor especificidad queclass. -
05.Explica el Box Model de CSS.Todo elemento en CSS es una "caja" compuesta de cuatro capas: Content (texto/imagen), Padding (espacio interior), Border (borde) y Margin (espacio exterior). Con
box-sizing: border-box, padding y border se incluyen dentro del tamaño declarado.div { box-sizing: border-box; width: 300px; padding: 20px; border: 2px solid black; } -
06.¿Qué es Flexbox y cuándo se usa?Flexbox es un sistema de layout unidimensional. Se usa para alinear elementos en una fila o columna. Ideal para barras de navegación, centrar elementos y distribuir espacio. Se activa con
display: flex;en el contenedor padre. -
07.¿Qué diferencia hay entre Flexbox y CSS Grid?Flexbox es unidimensional (una fila o columna). Grid es bidimensional (filas y columnas a la vez). Usa Flexbox para componentes pequeños como botones o navbars, y Grid para la estructura principal de la página.
-
08.¿Qué es la especificidad CSS y cómo se calcula?Cuando dos reglas se aplican al mismo elemento, la que gana es la más específica. El orden de peso de mayor a menor es: estilos inline > id > class/atributo/pseudo-clase > etiqueta.
!importantlo sobreescribe todo, pero su uso es una mala práctica. -
09.¿Cómo puedes centrar un elemento vertical y horizontalmente con CSS moderno?La forma más sencilla con Flexbox:
.container { display: flex; align-items: center; justify-content: center; }Con Grid es aún más corto:display: grid; place-items: center; -
10.¿Qué es el responsive design y cómo se implementa en CSS?Es diseñar interfaces que se adaptan a cualquier tamaño de pantalla. Se implementa principalmente con media queries:
@media (max-width: 768px) { ... }. Un enfoque moderno es "mobile-first": diseñas para móvil y luego añades estilos para pantallas más grandes. -
11.¿Qué es la herencia en CSS?Algunos estilos como
coloryfont-familyse "heredan" automáticamente a los elementos hijos. Otros comomargin,borderopaddingno se heredan. Puedes forzar la herencia con el valorinherit. -
12.¿Qué son las CSS Variables (Custom Properties)?Son variables nativas de CSS que se definen con
--nombrey se usan convar(--nombre). Permiten reutilizar valores y crear sistemas de diseño coherentes::root { --color-primario: #16a34a; } button { background: var(--color-primario); } -
13.¿Qué hace el
z-indexy cuándo no funciona?z-indexcontrola qué elemento se ve "encima" de otro en el eje Z. Solo funciona en elementos con una posición distinta astatic(comorelative,absoluteofixed). Si dos elementos no comparten el mismo "stacking context", el z-index puede no tener efecto. -
14.¿Cuál es la diferencia entre
position: absoluteyposition: fixed?absolute: el elemento se posiciona relativo a su ancestro más cercano conpositiondistinto destatic.fixed: el elemento se posiciona relativo a la ventana del navegador y no se mueve al hacer scroll. -
15.¿Qué es un pseudo-elemento? Pon un ejemplo.Permiten aplicar estilos a partes específicas de un elemento sin añadir HTML extra. Los más usados son
::beforey::after:a::after { content: " →"; }También existen::first-line,::placeholder, etc.
Espacio Publicitario — In-Article
Espacio Publicitario — Mid-Article
💡 Consejo para la entrevista
Cuando no sepas una respuesta al 100%, di: "No lo recuerdo de memoria, pero lo buscaría en MDN y
lo aplicaría así...". Los reclutadores valoran la honestidad y que sepas dónde buscar.
Espacio Publicitario — Final del Artículo
📌 Próximos artículos de entrevista:
→ 50 Preguntas de JavaScript