Este documento contiene una recopilación de preguntas comunes sobre HTML y CSS en entrevistas técnicas, con respuestas detalladas y ejemplos prácticos.
🔹 Cada pregunta está explicada en detalle en este mismo archivo.
Puedes desplazarte hasta la sección correspondiente haciendo clic en el índice. 🚀
<link> de CSS entre <head></head> y <script> de JavaScript justo antes de </body>? ¿Conoces alguna excepción?sessionStorage y localStorage.doctype?!important en CSS y cuáles son sus características?Son información adicional que se pasa a las etiquetas HTML para configurar o modificar su comportamiento. Se escriben siempre dentro de la etiqueta de apertura. Por ejemplo:
<img src="imagen.png" alt="Descripción de la imagen" width="300"/>
src: ruta de la imagen.alt: texto alternativo.width: establece el ancho.HTML semántico significa usar etiquetas que describan el significado del contenido, en lugar de usar etiquetas genéricas para todo. Ejemplos:
<header>, <footer>, <main>, <section>, <article>Separa la estructura del diseño y facilita la accesibilidad y el SEO.
SVG (Scalable Vector Graphics) es un formato vectorial para mostrar gráficos e ilustraciones en la web. Se incrusta en HTML usando <svg> o la etiqueta <img>.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Se pueden usar iframes (<iframe>) para anidar o incrustar otra página HTML dentro de una página principal.
<iframe src="pagina-interna.html" width="600" height="400"></iframe>
<ol>): los elementos están numerados o con un orden específico.<ul>): los elementos usan viñetas o puntos, sin un orden numérico.<span>, <a>.<div>, <p>.<span>, <a>, <strong>, <em>, <img>.<div>, <section>, <article>, <header>, <p>, <ul>.<link> de CSS entre <head> y <script> de JavaScript justo antes de </body>? <head> asegura un rápido renderizado inicial (evita el efecto de “página en blanco” o reestructuración tardía).Excepción: Scripts críticos para el contenido interactivo podrían ir en <head>.
sessionStorage y localStorage. doctype? Informa al navegador el tipo de documento y la versión de HTML a usar. En HTML5 se escribe simplemente <!DOCTYPE html>.
style en cada elemento.<style> en <head>..css enlazado con <link>.La mejor práctica es usar un archivo CSS externo para mantener el contenido (HTML) separado de la presentación (CSS), lo que mejora la mantenibilidad y la escalabilidad.
<link rel="stylesheet" href="styles.css">
Un selector define a qué elementos HTML se aplicarán las reglas de estilo.
div, p, h1, etc..clase.#id.input[type="text"].:hover, :focus.::before, ::after.Son preprocesadores de CSS que añaden características como variables, mixins y funciones. Luego se compilan a CSS puro.
Son frameworks/librerías CSS que facilitan la creación de interfaces responsivas y estéticas con clases predefinidas.
Cada elemento en CSS se modela como una caja con:
display: none; (remueve el elemento del flujo)visibility: hidden; (oculta pero mantiene el espacio)opacity: 0; (invisible pero interactuable)!important en CSS y cuáles son sus características? Fuerza a que esa regla tenga mayor prioridad que otras reglas (incluyendo inline styles), lo que puede dificultar el mantenimiento si se abusa de ello.
Se definen con la regla @keyframes y se aplican a un elemento con propiedades como animation-name, animation-duration, animation-iteration-count, etc.
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.elemento {
animation: girar 2s linear infinite;
}
Usar Flexbox para barras de navegación, menús simples. Usar Grid para diseños más complejos y bidimensionales.
:hover. Cambia el estilo cuando el cursor se posa sobre un elemento.button:hover {
background-color: blue;
color: white;
}
Porque las reglas se aplican en orden de prioridad (heredando estilos de sus padres) y, en caso de conflicto, el último estilo declarado (o el más específico) anula los anteriores.