# Preguntas y respuestas sobre WordPress, CSS y HTML

> Desarrollo Web, Consultoría y Soporte WordPress


## Preguntas

- [¿Qué son las unidades unidades de consulta de contenedor (Container Query Units) y cuándo conviene usarlas?](https://joseramonbernabeu.com/pregunta/que-son-las-unidades-unidades-de-consulta-de-contenedor-container-query-units-y-cuando-conviene-usarlas/): Descubre las unidades de consulta de contenedor en CSS. Escala tipografía y espaciados de forma fluida según el tamaño de...
- [¿Cómo puedo cargar plugins solo cuando sean necesarios?](https://joseramonbernabeu.com/pregunta/como-puedo-cargar-plugins-solo-cuando-sean-necesarios/): Para cargar plugins condicionalmente en WordPress, desactiva sus assets (CSS/JS) globalmente con wp_dequeue_style/script y luego cárgalos con wp_enqueue_style/script usando condicionales...
- [¿Cómo regenerar las miniaturas en WordPres?](https://joseramonbernabeu.com/pregunta/como-regenerar-las-miniaturas-en-wordpres/): Regenera miniaturas en WordPress con el plugin «reGenerate Thumbnails Advanced» (vía interfaz) o WP-CLI (wp media regenerate --yes en línea...
- [¿Qué hago si una nueva etiqueta o atributo HTML no funciona en un navegador antiguo?](https://joseramonbernabeu.com/pregunta/que-hago-si-una-nueva-etiqueta-o-atributo-html-no-funciona-en-un-navegador-antiguo/): Si una etiqueta/atributo HTML nuevo no funciona en navegadores antiguos, usa mejora progresiva, contenido de respaldo, polyfills/shivs (JavaScript para simular...
- [¿Por qué mi formulario HTML5 no valida como espero?](https://joseramonbernabeu.com/pregunta/por-que-mi-formulario-html5-no-valida-como-espero/): Si la validación HTML5 no funciona, revisa: el atributo novalidate en «form», formnovalidate en botones, atributos de validación (required, type,...
- [¿Cómo soluciono problemas de codificación de caracteres?](https://joseramonbernabeu.com/pregunta/como-soluciono-problemas-de-codificacion-de-caracteres/): Soluciona problemas de codificación (acentos, ñ) asegurando UTF-8: guarda archivos como UTF-8, añade «meta charset="UTF-8"» al inicio del «head» HTML,...
- [¿Cómo puedo mejorar el SEO técnico usando solo HTML?](https://joseramonbernabeu.com/pregunta/como-puedo-mejorar-el-seo-tecnico-usando-solo-html/): Mejora el SEO técnico con HTML usando: «title», meta descripción, alt en imágenes, «h1»-«h6» jerárquicos, semántica («main», «article»), «link rel="canonical"»>,...
- [¿Qué es el «prefetch» o «preload» y cómo se usa en HTML para optimizar la carga?](https://joseramonbernabeu.com/pregunta/que-es-el-prefetch-o-preload-y-como-se-usa-en-html-para-optimizar-la-carga/): preload descarga recursos críticos de alta prioridad para la página actual (requiere atributo as). prefetch descarga recursos de baja prioridad...
- [¿Cómo optimizo mi HTML para que cargue más rápido?](https://joseramonbernabeu.com/pregunta/como-optimizo-mi-html-para-que-cargue-mas-rapido/): Optimiza HTML para carga rápida: minifica el código, reduce nodos DOM, usa imágenes adaptables (srcset, loading="lazy"), carga CSS/JS eficientemente (defer)...
- [¿Con qué herramientas puedo validar mi HTML?](https://joseramonbernabeu.com/pregunta/con-que-herramientas-puedo-validar-mi-html/): Valida tu HTML con el servicio en línea del W3C (validator. w3. org), extensiones para editores de código (como HTMLHint...
- [¿Es importante validar mi código HTML?](https://joseramonbernabeu.com/pregunta/es-importante-validar-mi-codigo-html/): Sí, validar tu HTML es crucial. Asegura compatibilidad entre navegadores, facilita la depuración, mejora la accesibilidad, mantenibilidad y prepara tu...
- [¿Es buena práctica usar IDs o clases para todo?](https://joseramonbernabeu.com/pregunta/es-buena-practica-usar-ids-o-clases-para-todo/): No uses IDs o clases para todo. IDs para elementos únicos y «hooks» JS. Clases para estilos reutilizables. Aprovecha selectores...
- [¿Cómo afecta la estructura del DOM al rendimiento de mi web?](https://joseramonbernabeu.com/pregunta/como-afecta-la-estructura-del-dom-al-rendimiento-de-mi-web/): La estructura del DOM afecta al rendimiento web. Un DOM complejo ralentiza el renderizado, el cálculo de estilos y la...
- [¿Debo preocuparme por las etiquetas HTML obsoletas?](https://joseramonbernabeu.com/pregunta/debo-preocuparme-por-las-etiquetas-html-obsoletas/): Sí, evita etiquetas HTML obsoletas como «font» o «frame». No garantizan compatibilidad futura, afectan la accesibilidad, invalidan tu HTML y...
- [¿Cuáles son algunas buenas prácticas para escribir HTML limpio y mantenible?](https://joseramonbernabeu.com/pregunta/cuales-son-algunas-buenas-practicas-para-escribir-html-limpio-y-mantenible/): Escribe HTML limpio y mantenible usando semántica, validación, indentación, alt en imágenes, separando responsabilidades (HTML, CSS, JS) y comentando con...
- [¿Puede HTML funcionar sin CSS o JavaScript?](https://joseramonbernabeu.com/pregunta/puede-html-funcionar-sin-css-o-javascript/): Sí, HTML funciona sin CSS ni JavaScript. HTML estructura el contenido, que se muestra con estilos básicos del navegador y...
- [¿Se puede incluir CSS directamente en HTML?](https://joseramonbernabeu.com/pregunta/se-puede-incluir-css-directamente-en-html/): Sí, puedes incluir CSS en HTML usando «style» en el «head» (interno) o el atributo style en elementos (en línea)....
- [¿Cómo se enlaza una hoja de estilos CSS a un documento HTML?](https://joseramonbernabeu.com/pregunta/como-se-enlaza-una-hoja-de-estilos-css-a-un-documento-html/): Enlaza CSS a HTML usando «link rel="stylesheet" href="ruta/estilo. css"» dentro de la etiqueta «head». Esto asegura que los estilos se...
- [¿Cómo afectan los «custom elements» (parte de Web Components) a la escritura de HTML?](https://joseramonbernabeu.com/pregunta/como-afectan-los-custom-elements-parte-de-web-components-a-la-escritura-de-html/): Los «custom elements» (Web Components) permiten crear tus propias etiquetas HTML (ej. «mi-componente»), haciendo el HTML más semántico, modular y...
- [¿Es mejor poner los scripts de JavaScript en el «head» o antes de cerrar el «body»?](https://joseramonbernabeu.com/pregunta/es-mejor-poner-los-scripts-de-javascript-en-el-head-o-antes-de-cerrar-el-body/): Es mejor poner scripts JavaScript antes de «/body» para evitar bloqueo de renderizado y asegurar acceso al DOM. Alternativamente, usa...
- [¿Cómo interactúa JavaScript con los nuevos elementos de HTML5?](https://joseramonbernabeu.com/pregunta/como-interactua-javascript-con-los-nuevos-elementos-de-html5/): JavaScript interactúa con elementos HTML5 vía DOM y APIs específicas: controla «video»/«audio», dibuja en «canvas», gestiona «dialog», y usa «template»...
- [¿Cómo mejora HTML moderno la selección de elementos con CSS?](https://joseramonbernabeu.com/pregunta/como-mejora-html-moderno-la-seleccion-de-elementos-con-css/): HTML moderno no crea selectores CSS, pero sus nuevos elementos semánticos, tipos de input y atributos (como ARIA) ofrecen mejores...
- [¿Cómo ha mejorado HTML moderno la forma de enlazar CSS?](https://joseramonbernabeu.com/pregunta/como-ha-mejorado-html-moderno-la-forma-de-enlazar-css/): HTML moderno mejora el enlace de CSS con rel="preload" para carga no bloqueante, uso avanzado de media para estilos condicionales,...
- [¿Puedo insertar SVGs directamente en mi HTML?](https://joseramonbernabeu.com/pregunta/puedo-insertar-svgs-directamente-en-mi-html/): Puedes insertar SVGs directamente en HTML. Ventajas: menos peticiones HTTP, control con CSS y JS, escalabilidad perfecta y mejor accesibilidad.
- [¿Qué es una imagen adaptable («responsive image»)?](https://joseramonbernabeu.com/pregunta/que-es-una-imagen-adaptable-responsive-image/): Las imágenes adaptables se ajustan al dispositivo del usuario usando «img» con srcset/sizes para cambio de resolución, o «picture» para...
- [¿Cómo reproduzco audio de forma nativa con la etiqueta «audio»?](https://joseramonbernabeu.com/pregunta/como-reproduzco-audio-de-forma-nativa-con-la-etiqueta-audio/): Usa «audio» para reproducir sonido en HTML5. Añade «source» para varios formatos (MP3, Ogg, WAV) y usa atributos como controls,...
- [¿Cómo incrusto un vídeo en mi página usando la etiqueta «video» de HTML5?](https://joseramonbernabeu.com/pregunta/como-incrusto-un-video-en-mi-pagina-usando-la-etiqueta-video-de-html5/): Incrusta vídeos con «video» en HTML5. Usa «source» para múltiples formatos (MP4, WebM), y atributos como controls, width, height, poster...
- [¿Para qué sirve la etiqueta «button» y en qué se diferencia de «input type="submit"»?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-etiqueta-button-y-en-que-se-diferencia-de-input-typesubmit/): La etiqueta «button»> permite contenido HTML enriquecido (texto, imágenes) y tipos (submit, reset, button). «input type="submit"» solo muestra texto de...
- [¿Qué es la etiqueta «output» y cómo se puede usar en formularios?](https://joseramonbernabeu.com/pregunta/que-es-la-etiqueta-output-y-como-se-puede-usar-en-formularios/): La etiqueta «output» de HTML5 muestra el resultado de cálculos o acciones del usuario en formularios. Usa JavaScript para actualizarse...
- [¿Puedo tener varias etiquetas «body» en una página?](https://joseramonbernabeu.com/pregunta/puedo-tener-varias-etiquetas-body-en-una-pagina/): Una página HTML solo debe tener una etiqueta «body». Múltiples «body» resultan en HTML inválido y comportamiento impredecible del navegador.
- [¿Cómo se añaden comentarios en HTML?](https://joseramonbernabeu.com/pregunta/como-se-anaden-comentarios-en-html/): Aprende a añadir comentarios en HTML. Útiles para notas, depuración y explicaciones, pero visibles en el código fuente.
- [¿Qué etiquetas son semánticamente correctas?](https://joseramonbernabeu.com/pregunta/que-etiquetas-son-semanticamente-correctas/): HTML semántico incluye etiquetas como «header», «footer», «nav», «main», «article», «section», «aside», «figure», «time» para estructurar y dar significado al...
- [¿El uso de HTML semántico mejora el rendimiento del sitio web?](https://joseramonbernabeu.com/pregunta/el-uso-de-html-semantico-mejora-el-rendimiento-del-sitio-web/): El HTML semántico no mejora directamente la velocidad de carga del sitio, pero sí la accesibilidad, SEO y mantenibilidad. El...
- [¿Cómo ayuda el HTML semántico a los lectores de pantalla?](https://joseramonbernabeu.com/pregunta/como-ayuda-el-html-semantico-a-los-lectores-de-pantalla/): El HTML semántico ayuda a los lectores de pantalla a entender la estructura y el significado del contenido web, facilitando...
- [¿Cómo se realiza la validación de formularios con HTML5?](https://joseramonbernabeu.com/pregunta/como-se-realiza-la-validacion-de-formularios-con-html5/): HTML5 permite validar formularios usando atributos como required, pattern, min/max y tipos de input específicos. Mejora UX, pero valida siempre...
- [¿Cómo puedo agrupar campos relacionados en un formulario?](https://joseramonbernabeu.com/pregunta/como-puedo-agrupar-campos-relacionados-en-un-formulario/): Usa «fieldset»> para agrupar campos de formulario relacionados y «legend» para titular el grupo, mejorando la organización y accesibilidad de...
- [¿Cómo se usa la etiqueta «label» para asociar texto con campos de formulario?](https://joseramonbernabeu.com/pregunta/como-se-usa-la-etiqueta-label-para-asociar-texto-con-campos-de-formulario/): Aprende a usar «label» en HTML para asociar texto con campos de formulario mediante los atributos for e id (explícita)...
- [¿Qué nuevos tipos de «input» introdujo HTML5?](https://joseramonbernabeu.com/pregunta/que-nuevos-tipos-de-input-introdujo-html5/): Descubre los tipos de «input» que HTML5 añadió: email, url, tel, number, range, date, time, color y más para formularios...
- [¿Cuáles son los tipos de campos de entrada («input») más comunes?](https://joseramonbernabeu.com/pregunta/cuales-son-los-tipos-de-campos-de-entrada-input-mas-comunes/): Explora los tipos de «input» HTML más comunes: text, password, email, number, date, checkbox, radio, file, submit y más para...
- [¿Qué atributos tiene la etiqueta «form»?](https://joseramonbernabeu.com/pregunta/que-atributos-tiene-la-etiqueta-form/): Descubre los atributos clave de la etiqueta «form» en HTML: action, method, enctype, novalidate, target y autocomplete para controlar el...
- [¿Cómo creo un formulario en HTML?](https://joseramonbernabeu.com/pregunta/como-creo-un-formulario-en-html/): Aprende a crear un formulario HTML básico con «form», «label», «input», «textarea» y «button type="submit"» para recoger datos de tus...
- [¿Qué es el «focus management» y cómo se relaciona con HTML y accesibilidad?](https://joseramonbernabeu.com/pregunta/que-es-el-focus-management-y-como-se-relaciona-con-html-y-accesibilidad/): La gestión del foco controla qué elemento tiene la atención del teclado. Es vital para la accesibilidad, usando HTML (tabindex)...
- [¿Qué consideraciones de accesibilidad debo tener con los formularios HTML?](https://joseramonbernabeu.com/pregunta/que-consideraciones-de-accesibilidad-debo-tener-con-los-formularios-html/): Crea formularios HTML accesibles con etiquetas («label») correctas, «fieldset», required, mensajes de error claros y buena navegabilidad por teclado.
- [¿Existen herramientas para evaluar la accesibilidad de mi HTML?](https://joseramonbernabeu.com/pregunta/existen-herramientas-para-evaluar-la-accesibilidad-de-mi-html/): Descubre herramientas como axe DevTools, WAVE y Lighthouse para evaluar la accesibilidad de tu HTML y mejorar la experiencia de...
- [¿Cómo puedo asegurar que mi sitio sea navegable usando solo el teclado?](https://joseramonbernabeu.com/pregunta/como-puedo-asegurar-que-mi-sitio-sea-navegable-usando-solo-el-teclado/): Aprende a optimizar tu web para una navegación exclusiva con teclado: orden del foco, elementos interactivos, tabindex y enlaces de...
- [¿Qué es el contraste de color y cómo afecta a la legibilidad del HTML?](https://joseramonbernabeu.com/pregunta/que-es-el-contraste-de-color-y-como-afecta-a-la-legibilidad-del-html/): El contraste de color es vital para la legibilidad en HTML y la accesibilidad web (a11y). Aprende qué es, su...
- [¿Cómo hago tablas de datos accesibles?](https://joseramonbernabeu.com/pregunta/como-hago-tablas-de-datos-accesibles/): Crea tablas HTML accesibles usando «caption», «thead», «th» con scope y más. Asegura que tus datos tabulares sean comprensibles para...
- [¿Cómo se crean formularios accesibles?](https://joseramonbernabeu.com/pregunta/como-se-crean-formularios-accesibles/): Crea formularios HTML accesibles usando «label», «fieldset», «legend», indicaciones claras y validación. Mejora la experiencia para todos y cumple con...
- [¿Cómo se indica el idioma principal de la página y de partes de ella?](https://joseramonbernabeu.com/pregunta/como-se-indica-el-idioma-principal-de-la-pagina-y-de-partes-de-ella/): Aprende a usar el atributo lang en HTML para declarar el idioma de tu página y de fragmentos específicos, mejorando...
- [¿Cómo hago que las imágenes sean accesibles?](https://joseramonbernabeu.com/pregunta/como-hago-que-las-imagenes-sean-accesibles/): Haz tus imágenes HTML accesibles con el atributo alt. Aprende a escribir buen texto alternativo y a tratar imágenes decorativas...
- [¿Cómo contribuye un buen HTML semántico a la accesibilidad?](https://joseramonbernabeu.com/pregunta/como-contribuye-un-buen-html-semantico-a-la-accesibilidad/): Un buen HTML semántico es clave para la accesibilidad web (a11y). Descubre cómo etiquetas como o ayudan a las tecnologías...
- [¿Por qué es importante la accesibilidad web (a11y)?](https://joseramonbernabeu.com/pregunta/por-que-es-importante-la-accesibilidad-web-a11y/): La accesibilidad web (a11y) es vital para que todos, incluyendo personas con discapacidad, usen la web. Descubre por qué es...
- [¿Qué es WAI-ARIA y cuándo debo usar atributos ARIA?](https://joseramonbernabeu.com/pregunta/que-es-wai-aria-y-cuando-debo-usar-atributos-aria/): Descubre WAI-ARIA: qué es y cuándo usar atributos ARIA como role, aria-label o aria-expanded para hacer tu contenido web y...
- [¿Qué es el atributo role y cómo se relaciona con ARIA?](https://joseramonbernabeu.com/pregunta/que-es-el-atributo-role-y-como-se-relaciona-con-aria/): El atributo role en HTML, parte de ARIA, define la función de un elemento para mejorar la accesibilidad web. Aprende...
- [¿Cómo se usa el atributo tabindex para controlar la navegación por teclado?](https://joseramonbernabeu.com/pregunta/como-se-usa-el-atributo-tabindex-para-controlar-la-navegacion-por-teclado/): El atributo tabindex en HTML controla el foco y la navegación por teclado. Aprende a usar 0, -1 y por...
- [¿Para qué sirve el atributo download en un enlace?](https://joseramonbernabeu.com/pregunta/para-que-sirve-el-atributo-download-en-un-enlace/): El atributo download en enlaces HTML («a») sirve para que el navegador descargue el recurso enlazado en vez de navegar...
- [¿Cómo uso los atributos data-* para almacenar datos personalizados en los elementos?](https://joseramonbernabeu.com/pregunta/como-uso-los-atributos-data-para-almacenar-datos-personalizados-en-los-elementos/): Aprende a usar atributos data-* en HTML para almacenar datos personalizados en tus elementos y cómo acceder a ellos fácilmente...
- [¿Qué es el atributo hidden?](https://joseramonbernabeu.com/pregunta/que-es-el-atributo-hidden/): El atributo hidden en HTML oculta elementos no relevantes. Aprende cómo funciona, su impacto en accesibilidad y cómo manipularlo con...
- [¿Para qué sirve el atributo contenteditable?](https://joseramonbernabeu.com/pregunta/para-que-sirve-el-atributo-contenteditable/): El atributo contenteditable en HTML permite a los usuarios editar texto y contenido directamente en la página. ¡Descubre cómo funciona...
- [¿Qué hacen los atributos async y defer en las etiquetas «script»?](https://joseramonbernabeu.com/pregunta/que-hacen-los-atributos-async-y-defer-en-las-etiquetas-script/): Optimiza la carga de JavaScript en HTML con async y defer. Aprende cómo estos atributos en «script» mejoran el rendimiento...
- [¿Cómo funciona el atributo loading="lazy" para imágenes e iframes?](https://joseramonbernabeu.com/pregunta/como-funciona-el-atributo-loadinglazy-para-imagenes-e-iframes/): Descubre cómo loading="lazy" en HTML mejora el rendimiento al diferir la carga de imágenes e iframes hasta que son visibles....
- [¿Para qué sirve el atributo viewport en la etiqueta «meta»?](https://joseramonbernabeu.com/pregunta/para-que-sirve-el-atributo-viewport-en-la-etiqueta-meta/): El atributo viewport en la etiqueta de HTML controla cómo tu web se muestra en dispositivos. Usa width=device-width, initial-scale=1. 0...
- [¿Qué es el atributo charset en la etiqueta «meta»?](https://joseramonbernabeu.com/pregunta/que-es-el-atributo-charset-en-la-etiqueta-meta/): La etiqueta en HTML define la codificación de caracteres de tu web, asegurando que acentos y símbolos se muestren correctamente.
- [¿Qué son los microdatos y cómo se usan los atributos itemscope, itemtype e itemprop?](https://joseramonbernabeu.com/pregunta/que-son-los-microdatos-y-como-se-usan-los-atributos-itemscope-itemtype-e-itemprop/): Aprende sobre microdatos HTML: usa itemscope, itemtype, itemprop y Schema. org para datos estructurados. Mejora el SEO y consigue «rich...
- [¿Cómo puedo hacer que un enlace se descargue en lugar de navegar con el atributo download?](https://joseramonbernabeu.com/pregunta/como-puedo-hacer-que-un-enlace-se-descargue-en-lugar-de-navegar-con-el-atributo-download/): Haz que un enlace descargue archivos con el atributo download en HTML. Puedes sugerir un nombre de archivo.
- [¿Existen atributos para mejorar la seguridad en HTML?](https://joseramonbernabeu.com/pregunta/existen-atributos-para-mejorar-la-seguridad-en-html/): HTML ofrece atributos para mejorar la seguridad: rel="noopener noreferrer" en enlaces, sandbox en iframes, e integrity para scripts. ¡Protege tu...
- [¿Para qué sirve el atributo id y cómo se diferencia de class?](https://joseramonbernabeu.com/pregunta/para-que-sirve-el-atributo-id-y-como-se-diferencia-de-class/): id es un identificador único por página (anclajes, JS). class agrupa elementos para CSS reutilizable o JS. ¡Entiende sus diferencias...
- [¿Qué son los atributos globales en HTML?](https://joseramonbernabeu.com/pregunta/que-son-los-atributos-globales-en-html/): Los atributos globales HTML (id, class, style, title, lang) se pueden usar en cualquier etiqueta para añadir funcionalidades comunes. ¡Conócelos!
- [¿Hay herramientas para verificar la semántica de mi HTML?](https://joseramonbernabeu.com/pregunta/hay-herramientas-para-verificar-la-semantica-de-mi-html/): Verifica la semántica HTML con validadores (W3C), herramientas de accesibilidad (Lighthouse, Axe, WAVE) y linters. ¡Asegura un código de calidad!
- [¿Es importante la jerarquía de encabezados para la semántica?](https://joseramonbernabeu.com/pregunta/es-importante-la-jerarquia-de-encabezados-para-la-semantica/): Sí, la jerarquía de encabezados («h1»-«h6») es vital para la semántica HTML, accesibilidad y SEO. ¡Aprende a estructurar tus títulos...
- [¿Para qué se usa la etiqueta «time»?](https://joseramonbernabeu.com/pregunta/para-que-se-usa-la-etiqueta-time/): La etiqueta «time» representa fechas y horas de forma semántica y legible por máquinas con el atributo datetime. ¡Mejora SEO...
- [¿Cómo estructuro una página compleja usando HTML semántico?](https://joseramonbernabeu.com/pregunta/como-estructuro-una-pagina-compleja-usando-html-semantico/): Estructura páginas HTML complejas con semántica: usa «header», «nav», «main», «footer», «article», «section» y encabezados lógicos.
- [¿Qué hacen las etiquetas «details» y «summary»?](https://joseramonbernabeu.com/pregunta/que-hacen-las-etiquetas-details-y-summary/): Las etiquetas «details» y «summary» crean desplegables (acordeones) nativos en HTML para mostrar/ocultar info sin JS. ¡Ideal para FAQs y...
- [¿Para qué sirven las etiquetas «figure» y «figcaption»?](https://joseramonbernabeu.com/pregunta/para-que-sirven-las-etiquetas-figure-y-figcaption/): Con «figure» y «figcaption» agrupa contenido auto-contenido (imágenes, código) con su leyenda.
- [¿Cuál es la función de las etiquetas «header» y «footer» de sección y de página?](https://joseramonbernabeu.com/pregunta/cual-es-la-funcion-de-las-etiquetas-header-y-footer-de-seccion-y-de-pagina/): «Header» y «footer» en HTML: úsalos a nivel de página (logo, copyright) o de sección (título de artículo, autor). ¡Estructura...
- [¿Para qué se utiliza la etiqueta «nav»?](https://joseramonbernabeu.com/pregunta/para-que-se-utiliza-la-etiqueta-nav/): La etiqueta «nav» define bloques de navegación principales: menú del sitio, tabla de contenidos, «migas de pan». ¡Guía a tus...
- [¿Qué contenido debería ir en una etiqueta «aside»?](https://joseramonbernabeu.com/pregunta/que-contenido-deberia-ir-en-una-etiqueta-aside/): La etiqueta «aside» es para contenido tangencialmente relacionado al principal: barras laterales, publicidad, enlaces relacionados.
- [¿Cómo uso «article» y «section» correctamente? ¿Cuál es su diferencia?](https://joseramonbernabeu.com/pregunta/como-uso-article-y-section-correctamente-cual-es-su-diferencia/): «article» vs «section»: «article» es contenido auto-contenido e independiente (un post). «section» agrupa por tema.
- [¿Para qué sirve la etiqueta «main» y cuántas puede haber por página?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-etiqueta-main-y-cuantas-puede-haber-por-pagina/): La etiqueta «main» define el contenido principal y único de tu página. Solo debe haber una visible. ¡Clave para la...
- [¿Cuándo debo usar «div» y cuándo etiquetas semánticas?](https://joseramonbernabeu.com/pregunta/cuando-debo-usar-div-y-cuando-etiquetas-semanticas/): Etiquetas semánticas vs «div»: prioriza la semántica. Usa «div» para estilo (CSS) o JS si no hay etiqueta con significado....
- [¿Qué es el HTML semántico y cuáles son sus beneficios?](https://joseramonbernabeu.com/pregunta/que-es-el-html-semantico-y-cuales-son-sus-beneficios/): HTML semántico: usa etiquetas («article», «nav») por su significado. Logra mejor accesibilidad, SEO y código legible.
- [¿Para qué sirve y cómo uso la etiqueta «q»?](https://joseramonbernabeu.com/pregunta/para-que-sirve-y-como-uso-la-etiqueta-q/): Usa la etiqueta «q» para citas cortas en línea. Los navegadores añaden comillas automáticamente. ¡Aprende a citar correctamente dentro de...
- [¿Para qué sirve la etiqueta «blockquote»?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-etiqueta-blockquote/): La etiqueta «blockquote» se usa para citas extensas de otras fuentes. Aprende a atribuir con el atributo cite o los...
- [¿Cómo inserto un salto de línea o una línea horizontal?](https://joseramonbernabeu.com/pregunta/como-inserto-un-salto-de-linea-o-una-linea-horizontal/): Inserta saltos de línea con «br» para dividir texto (direcciones, poemas) y líneas horizontales con «hr» para rupturas temáticas.
- [¿Qué atributos tiene la etiqueta «a»?](https://joseramonbernabeu.com/pregunta/que-atributos-tiene-la-etiqueta-a/): La etiqueta «a» (enlace) usa atributos como href (destino), target (dónde abrir), rel (relación y seguridad) y download. ¡Domina los...
- [¿Cómo se crean encabezados en HTML? ¿Cuándo usar cada uno?](https://joseramonbernabeu.com/pregunta/como-se-crean-encabezados-en-html-cuando-usar-cada-uno/): Usa «h1»-«h6» para crear encabezados HTML y estructurar contenido. «h1» para el título principal, sigue la jerarquía. ¡Importante para SEO...
- [¿Cómo puedo mostrar código en una página HTML?](https://joseramonbernabeu.com/pregunta/como-puedo-mostrar-codigo-en-una-pagina-html/): Muestra código en HTML usando «code» para fragmentos y «pre»«code» para bloques, conservando formato.
- [¿Qué son las entidades HTML y cuándo las uso?](https://joseramonbernabeu.com/pregunta/que-son-las-entidades-html-y-cuando-las-uso/): Las entidades HTML (
- [¿Cuántos tipos de listas hay en HTML?](https://joseramonbernabeu.com/pregunta/cuantos-tipos-de-listas-hay-en-html/): HTML tiene 3 tipos principales de listas: no ordenadas , ordenadas y de descripción . Conoce también «menu» para listas...
- [¿Cómo creo listas ordenadas y no ordenadas en HTML?](https://joseramonbernabeu.com/pregunta/como-creo-listas-ordenadas-y-no-ordenadas-en-html/): Aprende a crear listas en HTML: para listas no ordenadas (viñetas) y para listas ordenadas (números). Usa para cada elemento.
- [¿Qué es la etiqueta «meta name="viewport" ...» y por qué es importante para el diseño adaptable?](https://joseramonbernabeu.com/pregunta/que-es-la-etiqueta-meta-nameviewport-y-por-que-es-importante-para-el-diseno-adaptable/): es vital para el diseño adaptable.
- [¿Para qué se usa la etiqueta «meta charset="UTF-8"»?](https://joseramonbernabeu.com/pregunta/para-que-se-usa-la-etiqueta-meta-charsetutf-8/): La etiqueta define la codificación de caracteres de tu HTML, asegurando que acentos y símbolos se vean bien. ¡Esencial para...
- [¿Para qué sirve y qué tipo de información se incluye en la sección «head» en HTML?](https://joseramonbernabeu.com/pregunta/para-que-sirve-y-que-tipo-de-informacion-se-incluye-en-la-seccion-head-en-html/): La sección «head» HTML contiene metadatos cruciales: «title», «meta» (charset, viewport, descripción), «link» para CSS y más. ¡Configura tu página!
- [¿Qué es la etiqueta HTML y qué atributos puede tener?](https://joseramonbernabeu.com/pregunta/que-es-la-etiqueta-html-y-que-atributos-puede-tener/): La etiqueta es la raíz de tu página. Aprende su función y atributos clave como lang para el idioma, esencial...
- [¿Cuál es la estructura mínima de un documento HTML?](https://joseramonbernabeu.com/pregunta/cual-es-la-estructura-minima-de-un-documento-html/): Descubre la estructura mínima de un HTML5: «! DOCTYPE html», «html», «head» con «meta charset» y «title», y «body». ¡La...
- [¿Por qué es importante usar HTML moderno en mis proyectos web?](https://joseramonbernabeu.com/pregunta/por-que-es-importante-usar-html-moderno-en-mis-proyectos-web/): Usar HTML moderno (HTML5+) mejora la semántica, accesibilidad, SEO, y rendimiento de tu web. ¡Aprovecha sus funcionalidades nativas y crea...
- [¿Cómo ve un navegador un archivo HTML?](https://joseramonbernabeu.com/pregunta/como-ve-un-navegador-un-archivo-html/): Un navegador lee tu HTML, construye el DOM (Modelo de Objetos del Documento), aplica CSS y «pinta» la página. ¡Descubre...
- [¿Por dónde empiezo si quiero aprender HTML desde cero?](https://joseramonbernabeu.com/pregunta/por-donde-empiezo-si-quiero-aprender-html-desde-cero/): ¿Quieres aprender HTML desde cero? Sigue estos pasos: entiende lo básico, elige editor, practica con etiquetas esenciales y consulta recursos...
- [¿Qué significa HTML5? ¿Es la única versión que se usa?](https://joseramonbernabeu.com/pregunta/que-significa-html5-es-la-unica-version-que-se-usa/): HTML5 es la base de la web moderna, con nuevas etiquetas y APIs. Hoy es un «estándar vivo» que evoluciona....
- [¿Para qué sirve el !DOCTYPE html al principio de cada página?](https://joseramonbernabeu.com/pregunta/para-que-sirve-el-doctype-html-al-principio-de-cada-pagina/): El es crucial: esta declaración indica al navegador que tu página es HTML5, asegurando el «modo estándar» para una correcta...
- [¿Necesito algún software especial para escribir HTML?](https://joseramonbernabeu.com/pregunta/necesito-algun-software-especial-para-escribir-html/): ¿Software especial para HTML? No lo necesitas. Aprende a escribir HTML con editores de texto simples o avanzados y visualízalo...
- [¿Qué relación tiene HTML con CSS y JavaScript?](https://joseramonbernabeu.com/pregunta/que-relacion-tiene-html-con-css-y-javascript/): HTML, CSS y JavaScript: el trío esencial de la web. HTML estructura, CSS estiliza y JS da interactividad. ¡Aprende cómo...
- [¿Quién creó HTML y quién lo mantiene actualmente?](https://joseramonbernabeu.com/pregunta/quien-creo-html-y-quien-lo-mantiene-actualmente/): HTML fue creado por Tim Berners-Lee. Hoy, el WHATWG lo mantiene como un «estándar vivo» con el W3C. ¡Descubre quién...
- [¿HTML es un lenguaje de programación?](https://joseramonbernabeu.com/pregunta/html-es-un-lenguaje-de-programacion/): ¿Es HTML un lenguaje de programación? Entiende la diferencia clave: HTML es un lenguaje de marcado para estructurar contenido, no...
- [¿Qué es HTML y para qué sirve?](https://joseramonbernabeu.com/pregunta/que-es-html-y-para-que-sirve/): Descubre qué es HTML (Lenguaje de Marcado de Hipertexto) y cómo esta tecnología fundamental sirve para estructurar todo el contenido...
- [¿Existen validadores de CSS online y para qué sirven?](https://joseramonbernabeu.com/pregunta/existen-validadores-de-css-online-y-para-que-sirven/): Confirma la existencia de validadores de CSS online (como el del W3C) y su utilidad para detectar errores de sintaxis...
- [¿Cómo puedo probar si mi diseño CSS es adaptable en diferentes dispositivos?](https://joseramonbernabeu.com/pregunta/como-puedo-probar-si-mi-diseno-css-es-adaptable-en-diferentes-dispositivos/): ¿Tu CSS es adaptable? Prueba redimensionando, con DevTools (emulador) y en móviles reales para una UX óptima en toda pantalla....
- [¿Por qué se recomienda evitar el uso excesivo de !important en CSS?](https://joseramonbernabeu.com/pregunta/por-que-se-recomienda-evitar-el-uso-excesivo-de-important-en-css/): Descubre por qué el uso excesivo de ! important en CSS rompe la cascada, dificulta el mantenimiento y es una...
- [¿Cómo puedo seleccionar un elemento determinado de una lista con CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-seleccionar-un-elemento-determinado-de-una-lista-con-css/): CSS: Selecciona ítems de lista con :nth-child(n). Usa números, odd/even o fórmulas para el primer, último o cualquier elemento. ¡Control...
- [¿Qué son los pseudo-elementos CSS como y cómo los utilizo?](https://joseramonbernabeu.com/pregunta/que-son-los-pseudo-elementos-css-como-y-como-los-utilizo/): Pseudo-elementos CSS (::before, ::after) estilizan partes de un elemento o añaden contenido sin HTML extra. Descubre cómo usar ::first-letter y...
- [¿Para qué sirven los selectores de pseudo-clase en CSS?](https://joseramonbernabeu.com/pregunta/para-que-sirven-los-selectores-de-pseudo-clase-en-css/): Descubre cómo las pseudo-clases CSS (:hover, :focus, :nth-child) permiten estilizar elementos basados en estados o posición, sin HTML extra.
- [¿Cuál es la diferencia entre selectores descendientes (div p) y selectores de hijo directo (div > p)?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-selectores-descendientes-div-p-y-selectores-de-hijo-directo-div-p/): Distingue entre selectores descendientes (ej. div p), que afectan a cualquier nivel de anidamiento, y selectores de hijo directo (div...
- [¿Cómo funcionan los selectores de atributo en CSS?](https://joseramonbernabeu.com/pregunta/como-funcionan-los-selectores-de-atributo-en-css/): Explora cómo los selectores de atributo en CSS permiten estilizar elementos HTML basándose en la presencia o el valor específico...
- [¿Cuándo debería usar un selector de ID en lugar de un selector de clase en CSS?](https://joseramonbernabeu.com/pregunta/cuando-deberia-usar-un-selector-de-id-en-lugar-de-un-selector-de-clase-en-css/): Aprende cuándo usar selectores de ID (para unicidad, anclajes, JS) frente a clases (para estilos reutilizables), priorizando clases para estilizar...
- [¿Es posible posicionar un elemento respecto a la ventana del navegador?](https://joseramonbernabeu.com/pregunta/es-posible-posicionar-un-elemento-respecto-a-la-ventana-del-navegador/): Confirma que sí es posible posicionar elementos respecto a la ventana del navegador (viewport) usando principalmente position: fixed; en CSS.
- [¿Cómo puedo superponer un texto sobre una imagen usando posicionamiento CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-superponer-un-texto-sobre-una-imagen-usando-posicionamiento-css/): Aprende a superponer texto sobre una imagen con CSS usando position: relative en un contenedor y position: absolute para el...
- [¿Qué es un contexto de apilamiento (stacking context) en CSS?](https://joseramonbernabeu.com/pregunta/que-es-un-contexto-de-apilamiento-stacking-context-en-css/): Entiende qué es un contexto de apilamiento en CSS: una unidad de elementos que se apilan juntos, aislando el comportamiento...
- [¿Qué es el z-index en CSS y cómo gestiona la superposición de elementos?](https://joseramonbernabeu.com/pregunta/que-es-el-z-index-en-css-y-como-gestiona-la-superposicion-de-elementos/): Descubre cómo z-index en CSS controla el orden de apilamiento (superposición) de elementos posicionados y la importancia de los contextos...
- [¿Qué es position: sticky y cómo puedo crear una cabecera fija al hacer scroll?](https://joseramonbernabeu.com/pregunta/que-es-position-sticky-y-como-puedo-crear-una-cabecera-fija-al-hacer-scroll/): Aprende qué es position: sticky; en CSS, un híbrido entre relative y fixed, y cómo usarlo para crear cabeceras que...
- [¿Cómo puedo controlar el desbordamiento de contenido (overflow) en un elemento CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-controlar-el-desbordamiento-de-contenido-overflow-en-un-elemento-css/): Descubre cómo la propiedad overflow en CSS (visible, hidden, scroll, auto) controla el comportamiento del contenido que excede las dimensiones...
- [¿Cuál es la diferencia entre border y outline en CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-border-y-outline-en-css/): Entiende las diferencias clave entre border (ocupa espacio, parte del box model) y outline (no ocupa espacio, para foco/depuración) en...
- [¿Para qué sirven las propiedades max-width y min-width en CSS?](https://joseramonbernabeu.com/pregunta/para-que-sirven-las-propiedades-max-width-y-min-width-en-css/): Conoce cómo max-width limita la anchura máxima de un elemento y min-width asegura una anchura mínima, claves para el diseño...
- [¿Qué es el colapso de márgenes en CSS y cómo puedo evitarlo?](https://joseramonbernabeu.com/pregunta/que-es-el-colapso-de-margenes-en-css-y-como-puedo-evitarlo/): Aprende qué es el colapso de márgenes verticales en CSS, cuándo ocurre (elementos adyacentes, padre-hijo) y cómo evitarlo con padding,...
- [¿Cómo afecta la propiedad box-sizing: border-box al cálculo del tamaño de un elemento?](https://joseramonbernabeu.com/pregunta/como-afecta-la-propiedad-box-sizing-border-box-al-calculo-del-tamano-de-un-elemento/): CSS: box-sizing: border-box; hace que el width y height de un elemento incluyan su padding y border, evitando cálculos complejos...
- [¿Cómo funciona position: fixed y para qué se suele utilizar?](https://joseramonbernabeu.com/pregunta/como-funciona-position-fixed-y-para-que-se-suele-utilizar/): Entiende cómo position: fixed; en CSS posiciona un elemento respecto al viewport, manteniéndolo fijo durante el scroll. Ideal para cabeceras...
- [¿Cómo manejar tablas de datos para que sean adaptables en CSS?](https://joseramonbernabeu.com/pregunta/como-manejar-tablas-de-datos-para-que-sean-adaptables-en-css/): Explora estrategias para tablas de datos adaptables en CSS, como el scroll horizontal o la reorganización de filas en formato...
- [¿Cómo puedo ocultar o mostrar elementos específicos en CSS según el tamaño de la pantalla?](https://joseramonbernabeu.com/pregunta/como-puedo-ocultar-o-mostrar-elementos-especificos-en-css-segun-el-tamano-de-la-pantalla/): Descubre cómo usar media queries junto con display: none; (u otros valores de display) para ocultar o mostrar elementos CSS...
- [¿Cómo puedo hacer que las imágenes sean adaptables en CSS para que se ajusten al contenedor?](https://joseramonbernabeu.com/pregunta/como-puedo-hacer-que-las-imagenes-sean-adaptables-en-css-para-que-se-ajusten-al-contenedor/): Aprende la técnica CSS clave para imágenes adaptables: max-width: 100%; height: auto; para que se ajusten a sus contenedores sin...
- [¿Cómo puedo crear un sistema de columnas básico con CSS Grid?](https://joseramonbernabeu.com/pregunta/como-puedo-crear-un-sistema-de-columnas-basico-con-css-grid/): Descubre cómo crear un sistema de columnas simple y flexible con CSS Grid usando display: grid, grid-template-columns (con fr o...
- [¿Puedo anidar contenedores Flexbox dentro de elementos Grid y viceversa?](https://joseramonbernabeu.com/pregunta/puedo-anidar-contenedores-flexbox-dentro-de-elementos-grid-y-viceversa/): ¡Sí! Aprende cómo anidar contenedores Flexbox dentro de ítems Grid y viceversa para aprovechar las fortalezas de ambos sistemas de...
- [¿Es posible crear disposiciones adaptables complejas combinando Flexbox y Grid?](https://joseramonbernabeu.com/pregunta/es-posible-crear-disposiciones-adaptables-complejas-combinando-flexbox-y-grid/): Comprueba que sí y que es recomendable combinar CSS Grid (para macro-layout) y Flexbox (para micro-layout y alineación) para crear...
- [¿Para qué sirve la propiedad gap (o grid-gap) en Flexbox y Grid?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-propiedad-gap-o-grid-gap-en-flexbox-y-grid/): Conoce la propiedad gap en CSS y cómo define el espacio (canalones) entre ítems en Flexbox y entre pistas (filas/columnas)...
- [¿Cómo puedo crear áreas de plantilla con nombre (grid-template-areas) en CSS Grid?](https://joseramonbernabeu.com/pregunta/como-puedo-crear-areas-de-plantilla-con-nombre-grid-template-areas-en-css-grid/): Descubre cómo usar grid-template-areas en CSS Grid para definir layouts visuales con nombres, asignando ítems con grid-area de forma intuitiva.
- [¿Qué es la unidad fr en CSS Grid y cómo funciona?](https://joseramonbernabeu.com/pregunta/que-es-la-unidad-fr-en-css-grid-y-como-funciona/): Entiende la unidad fr (fraccional) en CSS Grid: cómo representa una fracción del espacio disponible para crear diseños de cuadrícula...
- [¿Para qué sirven las propiedades flex-grow, flex-shrink y flex-basis en los elementos Flexbox?](https://joseramonbernabeu.com/pregunta/para-que-sirven-las-propiedades-flex-grow-flex-shrink-y-flex-basis-en-los-elementos-flexbox/): Entiende flex-grow (crecer), flex-shrink (encoger) y flex-basis (tamaño base) para controlar la flexibilidad de los ítems en un contenedor Flexbox.
- [¿Cómo puedo alinear elementos hijos dentro de un contenedor Flexbox?](https://joseramonbernabeu.com/pregunta/como-puedo-alinear-elementos-hijos-dentro-de-un-contenedor-flexbox/): Aprende a alinear ítems en un contenedor Flexbox usando justify-content (eje principal) y align-items (eje transversal), entre otras propiedades.
- [¿Cómo puedo añadir sombras a un texto en CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-anadir-sombras-a-un-texto-en-css/): Aprende a usar text-shadow en CSS para añadir efectos de sombra al texto, controlando desplazamiento, desenfoque y color para mejorar...
- [¿Qué son las fuentes variables en CSS y qué ventajas ofrecen?](https://joseramonbernabeu.com/pregunta/que-son-las-fuentes-variables-en-css-y-que-ventajas-ofrecen/): Conoce las fuentes variables en CSS: un solo archivo con múltiples variaciones (peso, ancho) y sus ventajas en rendimiento y...
- [¿Cómo puedo controlar el espaciado entre letras y palabras con CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-controlar-el-espaciado-entre-letras-y-palabras-con-css/): Descubre cómo usar letter-spacing para ajustar el espacio entre caracteres y word-spacing para el espacio entre palabras en CSS, mejorando...
- [¿Para qué sirve la propiedad line-height en CSS y cómo afecta la legibilidad?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-propiedad-line-height-en-css-y-como-afecta-la-legibilidad/): Entiende la propiedad line-height en CSS: cómo controla el espacio vertical entre líneas de texto y su impacto crucial en...
- [¿Cómo se define un color de fondo por defecto?](https://joseramonbernabeu.com/pregunta/como-se-define-un-color-de-fondo-por-defecto/): Descubre cómo establecer un color de fondo por defecto para tu página web usando background-color en body o html, y...
- [¿Cómo puedo crear degradados de color lineales y radiales usando CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-crear-degradados-de-color-lineales-y-radiales-usando-css/): Aprende a crear degradados lineales (linear-gradient) y radiales (radial-gradient) en CSS para fondos y efectos visuales atractivos.
- [¿Es posible aplicar múltiples imágenes de fondo a un solo elemento HTML con CSS?](https://joseramonbernabeu.com/pregunta/es-posible-aplicar-multiples-imagenes-de-fondo-a-un-solo-elemento-html-con-css/): Comprueba que sí, es posible aplicar múltiples imágenes de fondo (y gradientes) a un solo elemento en CSS, separándolas por...
- [¿Para qué sirve la propiedad background-size en CSS?](https://joseramonbernabeu.com/pregunta/para-que-sirve-la-propiedad-background-size-en-css/): Entiende cómo background-size en CSS (con valores como cover o contain) controla el tamaño de las imágenes de fondo para...
- [¿Cómo puedo controlar la repetición y la posición de una imagen de fondo?](https://joseramonbernabeu.com/pregunta/como-puedo-controlar-la-repeticion-y-la-posicion-de-una-imagen-de-fondo/): Aprende a usar background-repeat y background-position en CSS para controlar cómo se repite una imagen de fondo y dónde se...
- [¿Cómo establezco una imagen de fondo para un elemento con background-image en CSS?](https://joseramonbernabeu.com/pregunta/como-establezco-una-imagen-de-fondo-para-un-elemento-con-background-image-en-css/): Descubre cómo usar background-image: url; en CSS para establecer una imagen de fondo en elementos HTML y consideraciones para su...
- [¿Para qué tipo de efectos visuales son más adecuadas las animaciones CSS?](https://joseramonbernabeu.com/pregunta/para-que-tipo-de-efectos-visuales-son-mas-adecuadas-las-animaciones-css/): Descubre para qué efectos visuales son ideales las animaciones CSS: microinteracciones, transformaciones, bucles y efectos decorativos sin lógica compleja.
- [¿Es posible pausar o controlar la reproducción de animaciones CSS mediante JavaScript?](https://joseramonbernabeu.com/pregunta/es-posible-pausar-o-controlar-la-reproduccion-de-animaciones-css-mediante-javascript/): Comprueba que sí, puedes pausar y controlar animaciones CSS con JavaScript manipulando la propiedad animation-play-state (paused/running).
- [¿Cómo hacer que una animación CSS se ejecute en bucle o un número específico de veces?](https://joseramonbernabeu.com/pregunta/como-hacer-que-una-animacion-css-se-ejecute-en-bucle-o-un-numero-especifico-de-veces/): Aprende a usar animation-iteration-count en CSS para que una animación se repita un número específico de veces o en un...
- [¿Cómo se definen animaciones complejas en CSS utilizando la regla @keyframes?](https://joseramonbernabeu.com/pregunta/como-se-definen-animaciones-complejas-en-css-utilizando-la-regla-keyframes/): Descubre cómo usar la regla @keyframes en CSS para definir animaciones complejas con múltiples pasos intermedios (fotogramas clave) y cambios...
- [¿Cuáles son las propiedades principales para controlar una animación CSS?](https://joseramonbernabeu.com/pregunta/cuales-son-las-propiedades-principales-para-controlar-una-animacion-css/): Conoce las propiedades clave para controlar animaciones CSS: animation-name, duration, timing-function, delay, iteration-count, direction, etc.
- [¿Qué son las funciones de temporización (transition-timing-function) en las transiciones CSS?](https://joseramonbernabeu.com/pregunta/que-son-las-funciones-de-temporizacion-transition-timing-function-en-las-transiciones-css/): Entiende las funciones de temporización (ease, linear, cubic-bezier) en transiciones CSS, que controlan la aceleración y ritmo del cambio.
- [¿Cómo puedo crear una transición CSS simple para suavizar cambios de estilo?](https://joseramonbernabeu.com/pregunta/como-puedo-crear-una-transicion-css-simple-para-suavizar-cambios-de-estilo/): Aprende a crear transiciones CSS simples con la propiedad transition para suavizar cambios de estilo (ej. en :hover) definiendo propiedad...
- [¿Cuándo es más conveniente utilizar rem, em o px para tamaños de fuente y espaciados?](https://joseramonbernabeu.com/pregunta/cuando-es-mas-conveniente-utilizar-rem-em-o-px-para-tamanos-de-fuente-y-espaciados/): Aprende cuándo usar rem (accesibilidad, escalado global), em (escalado dentro de componentes) o px (valores fijos) para fuentes y espaciados...
- [¿Como usar clamp() o min()/max() para evitar tamaños de texto ilegibles en extremos?](https://joseramonbernabeu.com/pregunta/como-usar-clamp-o-min-max-para-evitar-tamanos-de-texto-ilegibles-en-extremos/): Aprende a usar clamp, min y max en CSS con unidades vw para controlar el tamaño de fuente, evitando textos...
- [¿Para qué tipo de diseños son útiles las unidades de viewport?](https://joseramonbernabeu.com/pregunta/para-que-tipo-de-disenos-son-utiles-las-unidades-de-viewport/): Descubre para qué diseños son ideales las unidades de viewport (vw, vh): secciones a pantalla completa, tipografía adaptable y layouts...
- [¿Cómo funcionan las unidades vw (ancho del viewport) y vh (alto del viewport) en CSS?](https://joseramonbernabeu.com/pregunta/como-funcionan-las-unidades-vw-ancho-del-viewport-y-vh-alto-del-viewport-en-css/): Entiende las unidades vw (1% ancho viewport) y vh (1% alto viewport) en CSS y cómo permiten dimensionar elementos en...
- [¿Por qué a veces mi disposición CSS se rompe en ciertas resoluciones de pantalla?](https://joseramonbernabeu.com/pregunta/por-que-a-veces-mi-disposicion-css-se-rompe-en-ciertas-resoluciones-de-pantalla/): ¿CSS roto en móviles? Causas: unidades fijas, overflow, media queries mal usadas, Flexbox/Grid. ¡Depura y mejora tu diseño adaptable!
- [¿Cuáles son las mejores prácticas para escribir CSS limpio, mantenible y eficiente?](https://joseramonbernabeu.com/pregunta/cuales-son-las-mejores-practicas-para-escribir-css-limpio-mantenible-y-eficiente/): CSS limpio y eficiente: Organiza tu código, usa nombres semánticos, variables CSS y baja especificidad. ¡Optimiza para calidad y mantenimiento!
- [¿Cómo resolver conflictos de estilos (problemas de especificidad) en CSS?](https://joseramonbernabeu.com/pregunta/como-resolver-conflictos-de-estilos-problemas-de-especificidad-en-css/): Descubre estrategias efectivas para solucionar conflictos de especificidad en CSS, usando DevTools, ajustando selectores y entendiendo el orden del código.
- [¿Cómo se calcula la especificidad en CSS?](https://joseramonbernabeu.com/pregunta/como-se-calcula-la-especificidad-en-css/): Aprende cómo se calcula la especificidad en CSS mediante un sistema de pesos (IDs, clases, elementos) para determinar qué regla...
- [¿Cuál es la diferencia entre display: none; y visibility: hidden;?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-display-none-y-visibility-hidden/): Conoce las diferencias cruciales entre display: none; (elimina del flujo y espacio) y visibility: hidden; (oculta pero reserva espacio) en...
- [¿Es CSS un lenguaje de programación?](https://joseramonbernabeu.com/pregunta/es-css-un-lenguaje-de-programacion/): Aclara si CSS es un lenguaje de programación. Entiende por qué se considera un lenguaje de hojas de estilo declarativo...
- [¿Cómo se insertan comentarios en el código CSS y para qué sirven?](https://joseramonbernabeu.com/pregunta/como-se-insertan-comentarios-en-el-codigo-css-y-para-que-sirven/): Descubre cómo usar comentarios (/* comentario */) en CSS para explicar código, organizar hojas de estilo, depurar y dejar notas...
- [¿Cuál es la diferencia entre HTML y CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-html-y-css/): HTML vs CSS: Entiende la diferencia. HTML estructura el contenido web (el «qué»), mientras CSS define su estilo y presentación...
- [¿Cuál es la sintaxis básica de una regla CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-sintaxis-basica-de-una-regla-css/): Aprende la sintaxis fundamental de una regla CSS, compuesta por un selector y un bloque de declaración con propiedades y...
- [¿Cómo funciona la herencia en CSS y qué propiedades se heredan?](https://joseramonbernabeu.com/pregunta/como-funciona-la-herencia-en-css-y-que-propiedades-se-heredan/): Descubre la herencia en CSS: cómo ciertas propiedades de elementos padre se transmiten a sus hijos y cuáles son las...
- [¿Qué significa «cascada» en CSS y cómo afecta a los estilos?](https://joseramonbernabeu.com/pregunta/que-significa-cascada-en-css-y-como-afecta-a-los-estilos/): Entiende cómo funciona la cascada en CSS: el algoritmo que resuelve conflictos entre estilos considerando origen, importancia, especificidad y orden.
- [¿Cuáles son las formas de añadir CSS a una página HTML y cuál es la recomendada?](https://joseramonbernabeu.com/pregunta/cuales-son-las-formas-de-anadir-css-a-una-pagina-html-y-cual-es-la-recomendada/): Aprende las tres formas de incluir CSS (en línea, interno, externo) y por qué las hojas de estilo externas son...
- [¿Qué nuevas funciones o selectores de CSS te parecen más prometedores?](https://joseramonbernabeu.com/pregunta/que-nuevas-funciones-o-selectores-de-css-te-parecen-mas-prometedores/): Explora las funciones y selectores CSS más prometedores como :has, subgrid, animaciones por scroll, nesting, View Transitions y más.
- [¿Qué son las container queries y qué problema resuelven?](https://joseramonbernabeu.com/pregunta/que-son-las-container-queries-y-que-problema-resuelven/): Descubre las container queries en CSS (@container): cómo permiten que los componentes se adapten al tamaño de su contenedor, no...
- [¿Qué son las capas de cascada (@layer) y cómo ayudan a gestionar la especificidad?](https://joseramonbernabeu.com/pregunta/que-son-las-capas-de-cascada-layer-y-como-ayudan-a-gestionar-la-especificidad/): Entiende las capas de cascada (@layer) en CSS: cómo definen un orden de precedencia explícito para gestionar la especificidad en...
- [¿Qué estrategias puedo seguir para solucionar problemas comunes de especificidad en CSS?](https://joseramonbernabeu.com/pregunta/que-estrategias-puedo-seguir-para-solucionar-problemas-comunes-de-especificidad-en-css/): Soluciona conflictos de especificidad CSS: inspecciona con DevTools, ajusta selectores, revisa orden y usa @layer. ¡Evita ! important para CSS...
- [Mi CSS no se aplica ¿Cuáles son los primeros pasos para depurar el problema?](https://joseramonbernabeu.com/pregunta/mi-css-no-se-aplica-cuales-son-los-primeros-pasos-para-depurar-el-problema/): Descubre los pasos clave para depurar CSS que no se aplica: revisar sintaxis, enlace, especificidad con DevTools, caché y aislar...
- [¿Se pueden modificar los valores de las variables CSS dinámicamente con JavaScript?](https://joseramonbernabeu.com/pregunta/se-pueden-modificar-los-valores-de-las-variables-css-dinamicamente-con-javascript/): ¡Sí! Aprende cómo modificar variables CSS dinámicamente con JavaScript usando element. style. setProperty('--variable', 'valor') para interactividad.
- [¿Cuáles son las principales ventajas de usar variables CSS para la temificación y el mantenimiento?](https://joseramonbernabeu.com/pregunta/cuales-son-las-principales-ventajas-de-usar-variables-css-para-la-temificacion-y-el-mantenimiento/): Conoce las ventajas de las variables CSS para temificación (cambio fácil de temas) y mantenimiento (punto único de verdad, código...
- [¿Cuál es el alcance (scope) de las variables CSS?](https://joseramonbernabeu.com/pregunta/cual-es-el-alcance-scope-de-las-variables-css/): Descubre el alcance de las variables CSS: cómo definirlas globalmente (en :root) o localmente en selectores específicos, y cómo funciona...
- [¿Cómo se definen y se utilizan las variables CSS con la sintaxis --nombre-variable y var()?](https://joseramonbernabeu.com/pregunta/como-se-definen-y-se-utilizan-las-variables-css-con-la-sintaxis-nombre-variable-y-var/): Aprende la sintaxis para definir variables CSS (--nombre: valor;) y usarlas con la función var(--nombre, fallback) para código reutilizable.
- [¿Cómo puedo usar la transparencia en colores CSS utilizando RGBA o HSLA?](https://joseramonbernabeu.com/pregunta/como-puedo-usar-la-transparencia-en-colores-css-utilizando-rgba-o-hsla/): Descubre cómo RGBA y HSLA en CSS permiten aplicar transparencia a los colores mediante el canal alfa, para fondos o...
- [¿Cómo se importan y utilizan fuentes web personalizadas con @font-face en CSS?](https://joseramonbernabeu.com/pregunta/como-se-importan-y-utilizan-fuentes-web-personalizadas-con-font-face-en-css/): Aprende a usar la regla @font-face en CSS para cargar y aplicar fuentes personalizadas en tu web, asegurando una tipografía...
- [¿Qué significa el enfoque «Mobile First» en el diseño adaptable y cuáles son sus beneficios?](https://joseramonbernabeu.com/pregunta/que-significa-el-enfoque-mobile-first-en-el-diseno-adaptable-y-cuales-son-sus-beneficios/): Descubre el enfoque «Mobile First»: diseñar para móviles primero y luego mejorar para pantallas grandes, y sus ventajas en rendimiento,...
- [¿Cuáles son los breakpoints más comunes que se usan en diseño adaptable?](https://joseramonbernabeu.com/pregunta/cuales-son-los-breakpoints-mas-comunes-que-se-usan-en-diseno-adaptable/): Conoce los breakpoints (puntos de corte) comunes en diseño adaptable, aunque la mejor práctica es definirlos según el contenido y...
- [¿Cómo se utilizan las media queries en CSS para adaptar un diseño a diferentes tamaños de pantalla?](https://joseramonbernabeu.com/pregunta/como-se-utilizan-las-media-queries-en-css-para-adaptar-un-diseno-a-diferentes-tamanos-de-pantalla/): Aprende a usar media queries en CSS para aplicar estilos específicos según el tamaño de pantalla, permitiendo adaptar tu diseño...
- [¿Cómo puedo centrar un elemento perfectamente (vertical y horizontal) usando Flexbox?](https://joseramonbernabeu.com/pregunta/como-puedo-centrar-un-elemento-perfectamente-vertical-y-horizontal-usando-flexbox/): Centrar un elemento perfectamente, tanto en el eje horizontal como en el vertical, dentro de un contenedor padre es una...
- [¿Cuáles son las propiedades clave para definir una cuadrícula con CSS Grid?](https://joseramonbernabeu.com/pregunta/cuales-son-las-propiedades-clave-para-definir-una-cuadricula-con-css-grid/): Aprende las propiedades esenciales para crear una cuadrícula con CSS Grid: display: grid, grid-template-columns, grid-template-rows y gap.
- [¿Cuáles son las propiedades fundamentales de un contenedor Flexbox?](https://joseramonbernabeu.com/pregunta/cuales-son-las-propiedades-fundamentales-de-un-contenedor-flexbox/): Conoce las propiedades clave de un contenedor Flexbox: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content y gap.
- [¿En qué se diferencian position: relative y position: absolute y cuándo usar cada uno?](https://joseramonbernabeu.com/pregunta/en-que-se-diferencian-position-relative-y-position-absolute-y-cuando-usar-cada-uno/): Distingue entre position: relative (posiciona respecto a su lugar original) y position: absolute (respecto a un ancestro posicionado o el...
- [¿Cuál es la diferencia entre margin y padding en el modelo de caja CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-margin-y-padding-en-el-modelo-de-caja-css/): Aclara la diferencia entre margin (espacio exterior al borde, para separar elementos) y padding (espacio interior, entre contenido y borde)...
- [¿Cuáles son los tipos de selectores CSS más comunes que debo conocer?](https://joseramonbernabeu.com/pregunta/cuales-son-los-tipos-de-selectores-css-mas-comunes-que-debo-conocer/): Descubre los selectores CSS más comunes: universal, de tipo, clase, ID, atributo y agrupados, y cómo usarlos para estilizar elementos...
- [¿Cuáles son las principales ventajas de usar CSS?](https://joseramonbernabeu.com/pregunta/cuales-son-las-principales-ventajas-de-usar-css/): Conoce las ventajas clave de CSS: separación de contenido y presentación, mantenimiento fácil, consistencia visual, reutilización de estilos y mejor...
- [¿Cómo puedo usar las herramientas de desarrollador del navegador para inspeccionar y depurar estilos CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-usar-las-herramientas-de-desarrollador-del-navegador-para-inspeccionar-y-depurar-estilos-css/): Aprende a usar DevTools (F12) para inspeccionar y depurar CSS: edita estilos en vivo, revisa la cascada y el box...
- [¿Cuál es la diferencia entre unidades absolutas y unidades relativas en CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-unidades-absolutas-como-px-y-unidades-relativas-como-em-rem-en-css/): Distingue entre unidades absolutas (ej. px, fijas) y relativas (ej. em, rem, %, vw, escalan con referencia) en CSS y...
- [¿Qué son las variables CSS (Custom Properties) y por qué son útiles?](https://joseramonbernabeu.com/pregunta/que-son-las-variables-css-propiedades-personalizadas-y-por-que-son-utiles/): Entiende las variables CSS (propiedades personalizadas): qué son, cómo se definen (--nombre: valor) y sus ventajas para la reutilización y...
- [¿Cuál es la diferencia entre transiciones y animaciones en CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-las-transiciones-css-y-las-animaciones-css/): Distingue entre transiciones CSS (cambios suaves entre dos estados por un disparador) y animaciones CSS (secuencias complejas con @keyframes).
- [¿Cuáles son las diferentes formas de especificar colores en CSS?](https://joseramonbernabeu.com/pregunta/cuales-son-las-diferentes-formas-de-especificar-colores-en-css/): Explora las diversas formas de definir colores en CSS: por nombre, hexadecimal (HEX), RGB/RGBA y HSL/HSLA, cada una con su...
- [¿Cómo puedo cambiar el tipo de fuente de un texto usando la propiedad font-family en CSS?](https://joseramonbernabeu.com/pregunta/como-puedo-cambiar-el-tipo-de-fuente-de-un-texto-usando-la-propiedad-font-family-en-css/): Cambia la fuente de tu texto con font-family. Aprende a crear una lista de fuentes (font stack) y a usar...
- [¿Qué es el diseño web adaptable y por qué es crucial para los sitios web modernos?](https://joseramonbernabeu.com/pregunta/que-es-el-diseno-web-adaptable-responsive-y-por-que-es-crucial-para-los-sitios-web-modernos/): Entiende el diseño web adaptable: el enfoque para que los sitios se vean y funcionen bien en cualquier dispositivo, y...
- [¿Qué es CSS Grid Layout y cuándo debería usarlo en lugar de Flexbox?](https://joseramonbernabeu.com/pregunta/que-es-css-grid-layout-y-cuando-deberia-usarlo-en-lugar-de-flexbox/): Descubre CSS Grid Layout, un sistema de diseño bidimensional para maquetar páginas, y cuándo preferirlo o combinarlo con Flexbox (unidimensional).
- [¿Qué es CSS Flexbox y cuáles son sus principales ventajas para el diseño de páginas?](https://joseramonbernabeu.com/pregunta/que-es-css-flexbox-y-cuales-son-sus-principales-ventajas-para-el-diseno-de-paginas/): Descubre CSS Flexbox, un modelo de diseño unidimensional ideal para alinear y distribuir espacio entre ítems de un contenedor de...
- [¿Cuáles son los diferentes valores de la propiedad position en CSS?](https://joseramonbernabeu.com/pregunta/cuales-son-los-diferentes-valores-de-la-propiedad-position-en-css-static-relative-absolute-fixed-sticky/): Explora los valores de la propiedad position en CSS: static, relative, absolute, fixed y sticky, y cómo afectan la ubicación...
- [¿Qué es el modelo de caja de CSS (Box Model)?](https://joseramonbernabeu.com/pregunta/que-es-el-modelo-de-caja-de-css-box-model/): Entiende el Modelo de Caja de CSS (Box Model): el concepto de que cada elemento HTML es una caja con...
- [¿Qué son los selectores CSS y por qué son tan importantes?](https://joseramonbernabeu.com/pregunta/que-son-los-selectores-css-y-por-que-son-tan-importantes/): Entiende qué son los selectores CSS y su importancia fundamental para apuntar y aplicar estilos a elementos HTML específicos de...
- [¿Cómo cambiar la dirección de correo electrónico de un usuario en WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-la-direccion-de-correo-electronico-de-un-usuario-en-wordpress/): Cambia el email de un usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita el perfil, modifica el campo...
- [¿Cómo cambiar la dirección de correo electrónico de administración en WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-la-direccion-de-correo-electronico-de-administracion-en-wordpress/): Cambia el email de admin en WordPress desde «Ajustes» > «Generales». Introduce la nueva dirección y ¡haz clic en el...
- [¿Cómo añadir una caja de búsqueda en WordPress?](https://joseramonbernabeu.com/pregunta/como-anadir-una-caja-de-busqueda-en-wordpress/): Para añadir una caja de búsqueda en WordPress, usa el bloque "Búsqueda" en entradas/páginas o el widget "Búsqueda" en barras...
- [¿Cómo añadir un mapa del sitio HTML en WordPress?](https://joseramonbernabeu.com/pregunta/como-anadir-un-mapa-del-sitio-html-en-wordpress/): Para añadir un mapa del sitio HTML en WordPress, usa un plugin como "WP Sitemap Page" o "Simple Sitemap". Instálalo,...
- [¿Cómo añadir un enlace de descarga en WordPress?](https://joseramonbernabeu.com/pregunta/como-anadir-un-enlace-de-descarga-en-wordpress/): Para añadir un enlace de descarga en WordPress, sube el archivo a la Biblioteca de Medios, copia su URL y...
- [¿Cómo hacer que WordPress sea multilingüe?](https://joseramonbernabeu.com/pregunta/como-hacer-que-wordpress-sea-multiidioma/): Para hacer WordPress multilingüe, usa plugins como WPML, Polylang, TranslatePress o Weglot.
- [¿Cómo configurar la caché en WordPress?](https://joseramonbernabeu.com/pregunta/como-configurar-la-cache-en-wordpress/): Configura la caché en WordPress instalando un plugin. Activa caché de página, caché del navegador, minificación CSS/JS y borra la...
- [¿Cuál es la diferencia entre entradas y páginas?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-entradas-y-paginas/): Las entradas son contenido dinámico (blog), organizado por categorías. Las páginas son contenido estático (contacto), jerárquico. Ambas tienen propósitos distintos.
- [¿Cuál es la curva de aprendizaje de WordPress?](https://joseramonbernabeu.com/pregunta/cual-es-la-curva-de-aprendizaje-de-wordpress/): La curva de aprendizaje de WordPress es suave para lo básico (instalación, contenido), moderada para personalización (Personalizador, page builders) y...
- [¿Cómo actualizar un tema de WordPress?](https://joseramonbernabeu.com/pregunta/como-actualizar-un-tema-de-wordpress/): Actualiza temas de WordPress haciendo copia de seguridad y usando tema hijo. Hazlo desde Escritorio > Actualizaciones, o manualmente vía...
- [¿Cómo cambiar el logo en mi tema de WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-el-logo-en-mi-tema-de-wordpress/): Cambia el logo de WordPress vía Apariencia > Personalizar > Identidad del sitio (temas clásicos) o Apariencia > Editor (temas...
- [¿Cómo agregar un «favicon» a mi sitio WordPress?](https://joseramonbernabeu.com/pregunta/como-agregar-un-favicon-a-mi-sitio-wordpress/): Agrega un favicon a WordPress fácilmente. Prepara una imagen 512x512px, ve a Apariencia > Personalizar > Identidad del sitio, sube...
- [¿Cómo configurar los ajustes generales de WordPress?](https://joseramonbernabeu.com/pregunta/como-configurar-los-ajustes-generales-de-wordpress/): Configura los ajustes generales de WordPress en Ajustes > Generales. Define título, descripción, URL, email de admin, opciones de registro,...
- [¿Qué son los «enlaces permanentes» y cómo configurarlos correctamente?](https://joseramonbernabeu.com/pregunta/que-son-los-enlaces-permanentes-y-como-configurarlos-correctamente/): Los "enlaces permanentes" son las URL fijas de tu contenido en WordPress. Configúralos en Ajustes > Enlaces permanentes. La opción...
- [¿Qué plugins son esenciales para un sitio WordPress?](https://joseramonbernabeu.com/pregunta/que-plugins-son-esenciales-para-un-sitio-wordpress/): Plugins esenciales para WordPress cubren seguridad, rendimiento, SEO, copias de seguridad, formularios y optimización de imágenes. Prioriza calidad y necesidad.
- [¿Cómo actualizar plugins de WordPress?](https://joseramonbernabeu.com/pregunta/como-actualizar-plugins-de-wordpress/): Para actualizar plugins de WordPress, usa las notificaciones en Escritorio > Actualizaciones o Plugins > Plugins instalados y haz clic...
- [¿Cómo activar y desactivar plugins?](https://joseramonbernabeu.com/pregunta/como-activar-y-desactivar-plugins/): Para activar/desactivar plugins en WordPress, ve a Plugins » Plugins instalados. Haz clic en "Activar" bajo un plugin inactivo o...
- [¿Cuántos plugins son demasiados?](https://joseramonbernabeu.com/pregunta/cuantos-plugins-son-demasiados/): No hay un límite de cuántos plugins son demasiados en WordPress; la clave es la calidad, necesidad, rendimiento y seguridad....
- [¿Cómo insertar videos de YouTube o Vimeo?](https://joseramonbernabeu.com/pregunta/como-insertar-videos-de-youtube-o-vimeo/): Inserta videos de YouTube/Vimeo en WordPress pegando la URL directamente en el editor de bloques (método oEmbed) o usando el...
- [¿Cómo agregar imágenes y galerías a mis entradas/páginas?](https://joseramonbernabeu.com/pregunta/como-agregar-imagenes-y-galerias-a-mis-entradas-paginas/): Para añadir imágenes o galerías en WordPress, usa el editor de bloques. Añade el bloque "Imagen" o "Galería", sube/selecciona medios,...
- [¿Cómo revisar y restaurar revisiones de entradas/páginas?](https://joseramonbernabeu.com/pregunta/como-revisar-y-restaurar-revisiones-de-entradas-paginas/): Revisa y restaura revisiones de entradas/páginas en WordPress desde la barra lateral del editor. Navega por el historial y recupera...
- [¿Cómo programar una publicación en WordPress?](https://joseramonbernabeu.com/pregunta/como-programar-una-publicacion-en-wordpress/): Programa publicaciones en WordPress desde el editor. En «Estado y visibilidad», selecciona una fecha y hora futura, luego haz clic...
- [¿Cómo crear y gestionar categorías y etiquetas?](https://joseramonbernabeu.com/pregunta/como-crear-y-gestionar-categorias-y-etiquetas/): Crea y gestiona categorías y etiquetas para entradas en «Entradas» > «Categorías»/«Etiquetas». Organizan tu contenido. Con FSE, se muestran con...
- [¿Cómo usar los bloques en WordPress?](https://joseramonbernabeu.com/pregunta/como-usar-los-bloques-en-wordpress/): Usa bloques en WordPress (Gutenberg) para añadir y organizar contenido (párrafos, imágenes) arrastrando y soltando. Configura cada bloque en el...
- [¿Cómo crear menús desplegables (submenús)?](https://joseramonbernabeu.com/pregunta/como-crear-menus-desplegables-submenus/): Crea menús desplegables en WordPress arrastrando elementos bajo el padre en «Apariencia» > «Menús». En temas FSE, usa el bloque...
- [¿Cómo agregar enlaces personalizados a los menús?](https://joseramonbernabeu.com/pregunta/como-agregar-enlaces-personalizados-a-los-menus/): Agrega enlaces personalizados a menús en WordPress desde «Apariencia» > «Menús» > «Enlaces personalizados». Para temas FSE, hazlo en el...
- [¿Cómo crear y gestionar menús de navegación?](https://joseramonbernabeu.com/pregunta/como-crear-y-gestionar-menus-de-navegacion/): Crea y gestiona menús en WordPress desde «Apariencia» > «Menús». Añade y organiza elementos. Para temas FSE, usa el bloque...
- [¿Cómo optimizar imágenes para WordPress?](https://joseramonbernabeu.com/pregunta/como-optimizar-imagenes-para-wordpress/): Optimiza imágenes para WordPress: redimensiona, comprime (TinyPNG, Smush) y usa formatos como WebP. Esencial para la velocidad de carga de...
- [¿Qué son los «Custom Fields» y cómo los uso?](https://joseramonbernabeu.com/pregunta/que-son-los-custom-fields-y-como-los-uso/): Los «Custom Fields» añaden metadatos extras a tu contenido (ej. «Tiempo de preparación»). Úsalos con plugins como Advanced Custom Fields...
- [¿Qué son los «Custom Post Types» y cómo crearlos?](https://joseramonbernabeu.com/pregunta/que-son-los-custom-post-types-y-como-crearlos/): Los «Custom Post Types» (CPT) son tipos de contenido únicos (ej. «Receta»). Organizan información específica. Créalos con plugins (CPT UI)...
- [¿Cómo agregar JavaScript personalizado a WordPress?](https://joseramonbernabeu.com/pregunta/como-agregar-javascript-personalizado-a-wordpress/): Agrega JavaScript personalizado a WordPress con plugins de fragmentos de código. También puedes usar wp_enqueue_script en el functions. php de...
- [¿Cómo usar CSS personalizado en WordPress?](https://joseramonbernabeu.com/pregunta/como-usar-css-personalizado-en-wordpress/): Añade CSS personalizado en WordPress desde «Apariencia» > «Personalizar» > «CSS Adicional». Para temas FSE, usa el Editor de Sitios...
- [¿Qué es el archivo functions.php y para qué sirve?](https://joseramonbernabeu.com/pregunta/que-es-el-archivo-functions-php-y-para-que-sirve/): El archivo functions. php de tu tema de WordPress añade funciones PHP y personalizaciones. ¡Úsalo siempre en un tema hijo...
- [¿Cómo restaurar una versión anterior de WordPress?](https://joseramonbernabeu.com/pregunta/como-restaurar-una-version-anterior-de-wordpress/): Restaura una versión anterior de WordPress usando una copia de seguridad completa y previa a la actualización problemática (con plugin...
- [¿Cómo solucionar problemas de compatibilidad de plugins/temas?](https://joseramonbernabeu.com/pregunta/como-solucionar-problemas-de-compatibilidad-de-plugins-temas/): Soluciona conflictos de plugins/temas: haz copia de seguridad, desactiva plugins uno a uno (o todos vía FTP) o cambia el...
- [¿Cómo limpiar la caché de WordPress?](https://joseramonbernabeu.com/pregunta/como-limpiar-la-cache-de-wordpress/): Limpia la caché de WordPress con tu plugin de caché («Limpiar caché» en WP Super Cache, WP Rocket). También desde...
- [¿Cómo solucionar el error 404 en los enlaces permanentes?](https://joseramonbernabeu.com/pregunta/como-solucionar-el-error-404-en-los-enlaces-permanentes/): Soluciona el error 404 de permalinks regenerando enlaces: ve a «Ajustes» > «Enlaces Permanentes» y «Guardar cambios». Si persiste, revisa...
- [¿Cómo restablecer la contraseña de administrador de WordPress?](https://joseramonbernabeu.com/pregunta/como-restablecer-la-contrasena-de-administrador-de-wordpress/): Restablece tu contraseña de administrador de WordPress desde la página de login («¿Olvidaste tu contraseña? »). También puedes hacerlo en...
- [¿Qué hago si no puedo acceder al panel de administración de WordPress?](https://joseramonbernabeu.com/pregunta/que-hago-si-no-puedo-acceder-al-panel-de-administracion-de-wordpress/): Si no puedes acceder al panel de WordPress: borra caché, restablece contraseña, desactiva plugins vía FTP o edita wp-config. php.
- [¿Qué son los datos estructurados (Schema Markup) y cómo los uso en WordPress?](https://joseramonbernabeu.com/pregunta/que-son-los-datos-estructurados-schema-markup-y-como-los-uso-en-wordpress/): Los datos estructurados (Schema Markup) ayudan a Google a entender tu contenido para resultados enriquecidos. Impleméntalos con plugins SEO (Rank...
- [¿Cómo crear un sitemap XML en WordPress?](https://joseramonbernabeu.com/pregunta/como-crear-un-sitemap-xml-en-wordpress/): Crea un sitemap XML en WordPress con plugins SEO (Yoast, Rank Math). WordPress 5. 5+ también lo genera. Envía tu...
- [¿Cómo optimizar los títulos y las descripciones de mis entradas/páginas?](https://joseramonbernabeu.com/pregunta/como-optimizar-los-titulos-y-las-descripciones-de-mis-entradas-paginas/): Optimiza títulos (50-60 caracteres) y descripciones (120-158 caracteres) con tu palabra clave principal. Usa plugins SEO para previsualizar y mejorar...
- [¿Cómo conectar mi sitio WordPress con Google Search Console?](https://joseramonbernabeu.com/pregunta/como-conectar-mi-sitio-wordpress-con-google-search-console/): Conecta WordPress a Google Search Console con «Site Kit by Google» o tu plugin de SEO. Esencial para monitorizar tu...
- [¿Cómo conectar mi sitio WordPress con Google Analytics?](https://joseramonbernabeu.com/pregunta/como-conectar-mi-sitio-wordpress-con-google-analytics/): Conecta WordPress con Google Analytics 4 usando el plugin oficial «Site Kit by Google». También puedes insertar el ID de...
- [¿Qué es un plugin de SEO y cuál recomiendas?](https://joseramonbernabeu.com/pregunta/que-es-un-plugin-de-seo-y-cual-recomiendas/): Un plugin de SEO optimiza tu WordPress para buscadores. Recomiendo SEOPress, Yoast SEO o Rank Math. Ayudan con títulos, descripciones,...
- [¿Qué significa «Error al establecer una conexión con la base de datos»?](https://joseramonbernabeu.com/pregunta/que-significa-error-al-establecer-una-conexion-con-la-base-de-datos/): Significa que tu WordPress no se conecta a su base de datos. Causas: credenciales incorrectas, servidor caído o base de...
- [¿Cómo depurar errores en WordPress (modo debug)?](https://joseramonbernabeu.com/pregunta/como-depurar-errores-en-wordpress-modo-debug/): Depura errores en WordPress activando el modo debug en wp-config. php. Cambia WP_DEBUG a true para ver mensajes o registrarlos...
- [¿Qué es la «pantalla blanca de la muerte» y cómo la arreglo?](https://joseramonbernabeu.com/pregunta/que-es-la-pantalla-blanca-de-la-muerte-y-como-la-arreglo/): La «pantalla blanca de la muerte» es un error crítico. Arréglala aumentando memoria PHP, desactivando plugins vía FTP, o cambiando...
- [¿Por qué son importantes las copias de seguridad?](https://joseramonbernabeu.com/pregunta/por-que-son-importantes-las-copias-de-seguridad/): Las copias de seguridad son vitales para WordPress. Protegen contra fallos, hackeos y errores. Son tu seguro para restaurar el...
- [¿Cómo restaurar un sitio WordPress desde una copia de seguridad?](https://joseramonbernabeu.com/pregunta/como-restaurar-un-sitio-wordpress-desde-una-copia-de-seguridad/): Restaura tu WordPress desde una copia de seguridad usando el plugin que la creó o desde el panel de tu...
- [¿Cómo hacer una copia de seguridad (backup) de mi sitio WordPress?](https://joseramonbernabeu.com/pregunta/como-hacer-una-copia-de-seguridad-backup-de-mi-sitio-wordpress/): Haz copias de seguridad de WordPress con plugins (UpdraftPlus) o desde tu hosting. Guarda siempre las copias en un lugar...
- [¿Cómo desinstalar un plugin de forma segura?](https://joseramonbernabeu.com/pregunta/como-desinstalar-un-plugin-de-forma-segura/): Desinstala un plugin de WordPress: primero desactívalo desde «Plugins» > «Plugins instalados», luego bórralo. Para limpieza total, busca opciones en...
- [¿Qué hago si un plugin causa un conflicto en mi sitio?](https://joseramonbernabeu.com/pregunta/que-hago-si-un-plugin-causa-un-conflicto-en-mi-sitio/): Para saber si un plugin es seguro: descarga de fuentes oficiales, busca actualizaciones regulares, buenas valoraciones y soporte activo.
- [¿Cómo sé si un plugin es seguro y fiable?](https://joseramonbernabeu.com/pregunta/como-se-si-un-plugin-es-seguro-y-fiable/): Para saber si un plugin es seguro: descarga de fuentes oficiales, busca actualizaciones regulares, buenas valoraciones y soporte activo.
- [¿Cómo instalar un plugin de WordPress?](https://joseramonbernabeu.com/pregunta/como-instalar-un-plugin-de-wordpress/): Instala plugins en WordPress desde «Plugins» > «Añadir nuevo». Busca en el directorio oficial, sube un archivo ZIP (para premium)...
- [¿Qué es un plugin de WordPress?](https://joseramonbernabeu.com/pregunta/que-es-un-plugin-de-wordpress/): Un plugin de WordPress es un software que añade funciones a tu web, como formularios o tiendas online. Extiende las...
- [¿Cómo personalizar un tema de WordPress?](https://joseramonbernabeu.com/pregunta/como-personalizar-un-tema-de-wordpress/): Personaliza tu tema WordPress con el Personalizador, opciones del tema o constructores visuales. Para temas FSE, usa el Editor de...
- [¿Qué hacer si mi tema no es compatible con una nueva versión de WordPress?](https://joseramonbernabeu.com/pregunta/que-hacer-si-mi-tema-no-es-compatible-con-una-nueva-version-de-wordpress/): Si tu tema no es compatible: no actualices WordPress aún. Haz copia de seguridad. Contacta al desarrollador o restaura una...
- [¿Qué debo buscar al elegir un tema de WordPress?](https://joseramonbernabeu.com/pregunta/que-debo-buscar-al-elegir-un-tema-de-wordpress/): Al elegir un tema: que sea relevante, adaptable, rápido, personalizable, compatible con plugins y con buen soporte. Revisa valoraciones y...
- [¿Cómo instalar un tema de WordPress?](https://joseramonbernabeu.com/pregunta/como-instalar-un-tema-de-wordpress/): Instala un tema de WordPress desde «Apariencia» > «Temas» > «Añadir nuevo». Puedes buscar en el directorio o subir un...
- [¿Qué es un tema de WordPress?](https://joseramonbernabeu.com/pregunta/que-es-un-tema-de-wordpress/): Un tema de WordPress define la apariencia y diseño de tu web. Controla colores, fuentes y disposición. Puedes cambiarlo sin...
- [¿Cómo usar un certificado SSL (HTTPS) en WordPress?](https://joseramonbernabeu.com/pregunta/como-usar-un-certificado-ssl-https-en-wordpress/): Usa HTTPS en WordPress: obtén un certificado SSL (gratis con tu hosting). Configura WordPress con un plugin como Really Simple...
- [¿Cómo optimizar mi sitio WordPress para SEO?](https://joseramonbernabeu.com/pregunta/como-optimizar-mi-sitio-wordpress-para-seo/): Optimiza WordPress para SEO: usa plugins (Yoast), permalinks amigables, palabras clave, contenido de calidad, optimiza imágenes y mejora la velocidad.
- [¿Cómo solucionar errores comunes de WordPress?](https://joseramonbernabeu.com/pregunta/como-solucionar-errores-comunes-de-wordpress/): Soluciona errores comunes de WordPress como la pantalla blanca o fallos de conexión. Identifica el problema, desactiva plugins/temas, o usa...
- [¿Qué es un «tema hijo» (child theme) y por qué debería usarlo?](https://joseramonbernabeu.com/pregunta/que-es-un-child-theme-en-wordpress-y-para-que-sirve/): Un tema hijo hereda el estilo del tema padre. Úsalo para personalizar tu WordPress sin perder cambios al actualizar el...
- [¿Cómo detectar y eliminar malware de WordPress?](https://joseramonbernabeu.com/pregunta/como-detectar-y-eliminar-malware-de-wordpress/): Detecta malware en WordPress por síntomas o con plugins de seguridad. Elimínalo restaurando copia limpia o limpiando archivos/base de datos.
- [¿Cómo proteger la página de acceso de WordPress?](https://joseramonbernabeu.com/pregunta/como-proteger-la-pagina-de-acceso-de-wordpress/): Protege tu login de WordPress limitando intentos, usando 2FA, cambiando la URL y con CAPTCHA. Es vital contra ataques de...
- [¿Qué hacer si mi sitio WordPress es hackeado?](https://joseramonbernabeu.com/pregunta/que-hacer-si-mi-sitio-wordpress-es-hackeado/): Si tu WordPress es hackeado: no entres en pánico. Desconecta, contacta al hosting, cambia contraseñas, restaura copia limpia, escanea y...
- [¿Qué es un cortafuegos para WordPress?](https://joseramonbernabeu.com/pregunta/que-es-un-cortafuegos-para-wordpress/): Un cortafuegos (WAF) para WordPress filtra y bloquea tráfico malicioso antes de que llegue a tu web. Es una barrera...
- [¿Cómo mantener actualizado WordPress, temas y plugins?](https://joseramonbernabeu.com/pregunta/como-mantener-actualizado-wordpress-temas-y-plugins/): Mantén tu WordPress actualizado desde «Escritorio» > «Actualizaciones». ¡Haz siempre una copia de seguridad! Crucial para seguridad, rendimiento y compatibilidad.
- [¿Cómo proteger mi sitio WordPress de hackers?](https://joseramonbernabeu.com/pregunta/como-proteger-mi-sitio-wordpress-de-hackers/): Protege tu WordPress: actualiza todo, usa contraseñas fuertes, plugins de confianza, instala seguridad (Wordfence) y haz copias de seguridad. Usa...
- [¿Qué es un CDN (Content Delivery Network) y lo necesito?](https://joseramonbernabeu.com/pregunta/que-es-un-cdn-content-delivery-network-y-lo-necesito/): Un CDN entrega tus archivos desde servidores cercanos al usuario, acelerando tu web globalmente. Lo necesitas si tienes audiencia internacional...
- [¿Cómo crear un usuario administrador en WordPress si no puedo acceder al panel de administración?](https://joseramonbernabeu.com/pregunta/como-crear-un-usuario-administrador-en-wordpress-si-no-puedo-acceder-al-pandel-de-administracion/): Si no puedes acceder, crea un admin desde phpMyAdmin. Inserta usuario y contraseña MD5 en wp_users y asigna perfil de...
- [¿Cómo comprimir imágenes para WordPress?](https://joseramonbernabeu.com/pregunta/como-comprimir-imagenes-para-wordpress/): Comprime imágenes para WordPress: redimensiona, usa herramientas (TinyPNG) o plugins (Smush) y el formato WebP. Vital para la velocidad y...
- [¿Cómo optimizar la base de datos de WordPress?](https://joseramonbernabeu.com/pregunta/como-optimizar-la-base-de-datos-de-wordpress/): Optimiza tu base de datos de WordPress limpiando revisiones, spam y datos innecesarios. Usa plugins como WP-Optimize para mantenerla eficiente...
- [¿Qué es el almacenamiento en caché y cómo ayuda a la velocidad?](https://joseramonbernabeu.com/pregunta/que-es-el-almacenamiento-en-cache-y-como-ayuda-a-la-velocidad/): La caché guarda versiones estáticas de tu web. Así, tu servidor trabaja menos y tu sitio carga más rápido, mejorando...
- [¿Cómo mejorar la velocidad de carga de mi sitio WordPress?](https://joseramonbernabeu.com/pregunta/como-mejorar-la-velocidad-de-carga-de-mi-sitio-wordpress/): Mejora tu WordPress: elige buen hosting, usa caché (WP Super Cache), optimiza imágenes y CDN. Mantén todo actualizado y elimina...
- [¿Cómo cambiar el nombre a mostrar públicamente en WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-el-nombre-a-mostrar-publicamente-en-wordpress/): Para cambiar tu nombre público en WordPress, ve a Usuarios > Tu perfil, busca la sección "Nombre", define un "Apodo"...
- [¿Cómo asignar y cambiar perfiles de usuario en WordPress?](https://joseramonbernabeu.com/pregunta/como-asignar-y-cambiar-perfiles-de-usuario-en-wordpress/): Asigna y cambia roles de usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita el perfil y selecciona el...
- [¿Cómo crear nuevos usuarios en WordPress?](https://joseramonbernabeu.com/pregunta/como-crear-nuevos-usuarios-en-wordpress/): Crea nuevos usuarios en WordPress desde «Usuarios» > «Añadir nuevo». Rellena datos (usuario, email, contraseña) y asigna un perfil para...
- [¿Cómo gestionar los perfiles de usuario?](https://joseramonbernabeu.com/pregunta/como-gestionar-los-perfiles-de-usuario/): Gestiona perfiles de usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita información personal, cambia contraseñas y asigna roles.
- [¿Qué son los perfiles de usuario en WordPress?](https://joseramonbernabeu.com/pregunta/que-son-los-perfiles-de-usuario-en-wordpress/): Los perfiles de usuario definen permisos en WordPress. Desde «Administrador» con control total a «Suscriptor» con acceso limitado. Clave para...
- [¿Cómo gestionar la biblioteca de medios de WordPress?](https://joseramonbernabeu.com/pregunta/como-gestionar-la-biblioteca-de-medios-de-wordpress/): Gestiona tus medios en WordPress desde «Medios» > «Biblioteca». Sube, organiza, edita metadatos (alt text para SEO) y optimiza tus...
- [¿Qué es el editor de bloques?](https://joseramonbernabeu.com/pregunta/que-es-el-editor-de-bloques/): El editor de bloques (Gutenberg) es el editor visual de WordPress. Te permite crear contenido arrastrando y soltando «bloques». Diseña...
- [¿Cómo crear una página de inicio estática en WordPress?](https://joseramonbernabeu.com/pregunta/como-crear-una-pagina-de-inicio-estatica-en-wordpress/): Para crear una página de inicio estática en WordPress, crea una página "Inicio", opcionalmente una para "Blog", y luego ve...
- [¿Cómo cambiar el nombre de usuario en WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-el-nombre-de-usuario-en-wordpress/): Para cambiar tu nombre de usuario en WordPress, lo más seguro es crear un nuevo administrador y eliminar el antiguo,...
- [¿Cómo configurar la página de inicio y la página de entradas?](https://joseramonbernabeu.com/pregunta/como-configurar-la-pagina-de-inicio-y-la-pagina-de-entradas/): Configura tu portada de WordPress. Crea dos páginas («Inicio» y «Blog»). En «Ajustes» > «Lectura», asigna «Inicio» como portada y...
- [¿Cómo activar o desactivar los comentarios en WordPress?](https://joseramonbernabeu.com/pregunta/como-activar-o-desactivar-los-comentarios-en-wordpress/): Activa/desactiva comentarios en WordPress. Hazlo globalmente en «Ajustes» > «Comentarios» o individualmente desde el editor de cada entrada/página.
- [¿Cómo instalar WordPress en un servidor local?](https://joseramonbernabeu.com/pregunta/como-instalar-wordpress-en-un-servidor-local/): Instala WordPress localmente con XAMPP, WAMP o MAMP. Crea una base de datos en phpMyAdmin, descarga WordPress y ejecuta el...
- [¿Qué es un dominio y cómo lo asocio a mi sitio WordPress?](https://joseramonbernabeu.com/pregunta/que-es-un-dominio-y-como-lo-asocio-a-mi-sitio-wordpress/): Un dominio es la dirección de tu web (ej. tudominio. com). Cómpralo y apúntalo a tu hosting con los servidores...
- [¿Qué es un hosting y por qué lo necesito para WordPress?](https://joseramonbernabeu.com/pregunta/que-es-un-hosting-y-por-que-lo-necesito-para-wordpress/): El hosting es el «hogar» de tu web. Almacena todos los archivos de WordPress y lo hace visible 24/7 en...
- [¿Cuál es la diferencia entre display: inline y display: block en CSS?](https://joseramonbernabeu.com/pregunta/cual-es-la-diferencia-entre-display-inline-y-display-block-en-css/): display: block vs inline en CSS: block ocupa todo el ancho y nueva línea; inline fluye con su contenido. ¡Controla...
- [¿Cómo cambiar la URL de WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-la-url-de-wordpress/): Cambia la URL de tu WordPress en «Ajustes» > «Generales». Actualiza ambas direcciones. Si hay fallos, edita wp-config. php o...
- [¿Cómo cambiar el idioma de WordPress?](https://joseramonbernabeu.com/pregunta/como-cambiar-el-idioma-de-wordpress/): Cambia el idioma de WordPress fácilmente. Ve a «Ajustes» > «Generales», selecciona el idioma en «Idioma del sitio» y guarda...
- [¿Qué es WordPress?](https://joseramonbernabeu.com/pregunta/que-es-wordpress/): WordPress es un sistema de gestión de contenidos (CMS) de código abierto para crear y gestionar webs. Es líder mundial...
- [¿Es WordPress gratuito?](https://joseramonbernabeu.com/pregunta/es-wordpress-gratuito/): El software WordPress es gratis, ¡sí! Pero necesitarás pagar un hosting y un dominio para tu web. Plugins y temas...
- [¿Es WordPress seguro?](https://joseramonbernabeu.com/pregunta/es-wordpress-seguro/): WordPress es seguro si lo mantienes actualizado, usas contraseñas fuertes, plugins de confianza y haces copias de seguridad. La seguridad...
- [¿Cuáles son los requisitos mínimos para instalar WordPress?](https://joseramonbernabeu.com/pregunta/cuales-son-los-requisitos-minimos-para-instalar-wordpress/): Para instalar WordPress necesitas PHP 7. 4+ o superior, MySQL 8. 0+ o MariaDB 10. 5+, un servidor web (Apache/Nginx),...
- [¿Qué tipo de sitios web puedo crear con WordPress?](https://joseramonbernabeu.com/pregunta/que-tipo-de-sitios-web-puedo-crear-con-wordpress/): Crea cualquier web con WordPress: blogs, tiendas online, webs corporativas, portfolios, revistas. Su flexibilidad con temas y plugins es inigualable.
- [¿Necesito saber programar para crear un sitio web con WordPress?](https://joseramonbernabeu.com/pregunta/necesito-saber-programar-para-crear-un-sitio-web-con-wordpress/): No necesitas programar para usar WordPress. Su editor visual, temas y plugins permiten crear webs sin código. Es fácil para...
- [¿Qué diferencias hay entre WordPress.org y WordPress.com?](https://joseramonbernabeu.com/pregunta/que-diferencias-hay-entre-wordpress-org-y-wordpress-com/): WordPress. org te da control total con tu propio hosting. WordPress. com es servicio simple con límites. Elige la plataforma...
- [¿Cómo instalar WordPress?](https://joseramonbernabeu.com/pregunta/como-instalar-wordpress/): Instala WordPress fácilmente. Paso a paso para descargar, subir archivos y configurar tu web con autoinstalador o manualmente.
- [¿Cómo cambiar el color de fondo de un elemento en CSS?](https://joseramonbernabeu.com/pregunta/como-cambiar-el-color-de-fondo-en-css/): Aprende a cambiar el color de fondo de cualquier elemento HTML usando la propiedad background-color en CSS y diferentes formatos...
- [¿Qué es CSS y para qué se utiliza en el desarrollo web?](https://joseramonbernabeu.com/pregunta/que-es-css-desarrollo-web/): Descubre qué es CSS (Hojas de Estilo en Cascada) y cómo este lenguaje de diseño gráfico define la apariencia y...

#
# Detailed Content


## Preguntas

Descubre las unidades de consulta de contenedor en CSS. Escala tipografía y espaciados de forma fluida según el tamaño de su contenedor. ¡CSS adaptable!


Para cargar plugins condicionalmente en WordPress, desactiva sus assets (CSS/JS) globalmente con wp_dequeue_style/script y luego cárgalos con wp_enqueue_style/script usando condicionales (is_page(), etc.). Para usuarios avanzados.


Regenera miniaturas en WordPress con el plugin «reGenerate Thumbnails Advanced» (vía interfaz) o WP-CLI (wp media regenerate --yes en línea de comandos) para eficiencia y control.


Si una etiqueta/atributo HTML nuevo no funciona en navegadores antiguos, usa mejora progresiva, contenido de respaldo, polyfills/shivs (JavaScript para simular funcionalidad), o detección de características.


Si la validación HTML5 no funciona, revisa: el atributo novalidate en «form», formnovalidate en botones, atributos de validación (required, type, pattern) en inputs e interferencia de JavaScript.


Soluciona problemas de codificación (acentos, ñ) asegurando UTF-8: guarda archivos como UTF-8, añade «meta charset="UTF-8"» al inicio del «head» HTML, y configura el servidor para enviar cabeceras UTF-8.


Mejora el SEO técnico con HTML usando: «title», meta descripción, alt en imágenes, «h1»-«h6» jerárquicos, semántica («main», «article»), «link rel="canonical"»>, lang y viewport.


preload descarga recursos críticos de alta prioridad para la página actual (requiere atributo as). prefetch descarga recursos de baja prioridad para navegación futura. Ambos optimizan la carga.


Optimiza HTML para carga rápida: minifica el código, reduce nodos DOM, usa imágenes adaptables (srcset, loading="lazy"), carga CSS/JS eficientemente (defer) y habilita compresión Gzip/Brotli.


Valida tu HTML con el servicio en línea del W3C (validator.w3.org), extensiones para editores de código (como HTMLHint para VS Code) o herramientas CLI como HTMLHint o html-validate.


Sí, validar tu HTML es crucial. Asegura compatibilidad entre navegadores, facilita la depuración, mejora la accesibilidad, mantenibilidad y prepara tu web para el futuro.


No uses IDs o clases para todo. IDs para elementos únicos y «hooks» JS. Clases para estilos reutilizables. Aprovecha selectores de tipo y descendencia.


La estructura del DOM afecta al rendimiento web. Un DOM complejo ralentiza el renderizado, el cálculo de estilos y la manipulación con JavaScript, y aumenta el coste de reflujos/repintados.


Sí, evita etiquetas HTML obsoletas como «font» o «frame». No garantizan compatibilidad futura, afectan la accesibilidad, invalidan tu HTML y dificultan el mantenimiento.


Escribe HTML limpio y mantenible usando semántica, validación, indentación, alt en imágenes, separando responsabilidades (HTML, CSS, JS) y comentando con claridad.


Sí, HTML funciona sin CSS ni JavaScript. HTML estructura el contenido, que se muestra con estilos básicos del navegador y sin interactividad avanzada.


Sí, puedes incluir CSS en HTML usando «style» en el «head» (interno) o el atributo style en elementos (en línea). Ideal para estilos específicos de página o elemento.


Enlaza CSS a HTML usando «link rel="stylesheet" href="ruta/estilo.css"» dentro de la etiqueta «head». Esto asegura que los estilos se apliquen al cargar la página.


Los «custom elements» (Web Components) permiten crear tus propias etiquetas HTML (ej. «mi-componente»), haciendo el HTML más semántico, modular y reutilizable mediante atributos y «slot».


Es mejor poner scripts JavaScript antes de «/body» para evitar bloqueo de renderizado y asegurar acceso al DOM. Alternativamente, usa «script defer» en «head» para carga asíncrona.


JavaScript interactúa con elementos HTML5 vía DOM y APIs específicas: controla «video»/«audio», dibuja en «canvas», gestiona «dialog», y usa «template» para contenido dinámico.


HTML moderno no crea selectores CSS, pero sus nuevos elementos semánticos, tipos de input y atributos (como ARIA) ofrecen mejores «ganchos» para una selección CSS más precisa y significativa.


HTML moderno mejora el enlace de CSS con rel="preload" para carga no bloqueante, uso avanzado de media para estilos condicionales, y Shadow DOM para CSS encapsulado en componentes.


Puedes insertar SVGs directamente en HTML. Ventajas: menos peticiones HTTP, control con CSS y JS, escalabilidad perfecta y mejor accesibilidad.


Las imágenes adaptables se ajustan al dispositivo del usuario usando «img» con srcset/sizes para cambio de resolución, o «picture» para dirección de arte y formatos.


Usa «audio» para reproducir sonido en HTML5. Añade «source» para varios formatos (MP3, Ogg, WAV) y usa atributos como controls, loop y preload.


Incrusta vídeos con «video» en HTML5. Usa «source» para múltiples formatos (MP4, WebM), y atributos como controls, width, height, poster y «track» para accesibilidad.


La etiqueta «button»> permite contenido HTML enriquecido (texto, imágenes) y tipos (submit, reset, button). «input type="submit"» solo muestra texto de su atributo value.


La etiqueta «output» de HTML5 muestra el resultado de cálculos o acciones del usuario en formularios. Usa JavaScript para actualizarse y for para accesibilidad.


Una página HTML solo debe tener una etiqueta «body». Múltiples «body» resultan en HTML inválido y comportamiento impredecible del navegador.


Aprende a añadir comentarios en HTML. Útiles para notas, depuración y explicaciones, pero visibles en el código fuente.


HTML semántico incluye etiquetas como «header», «footer», «nav», «main», «article», «section», «aside», «figure», «time» para estructurar y dar significado al contenido web.


El HTML semántico no mejora directamente la velocidad de carga del sitio, pero sí la accesibilidad, SEO y mantenibilidad. El rendimiento web depende de otras optimizaciones.


El HTML semántico ayuda a los lectores de pantalla a entender la estructura y el significado del contenido web, facilitando la navegación y la comprensión a usuarios con discapacidad visual.


HTML5 permite validar formularios usando atributos como required, pattern, min/max y tipos de input específicos. Mejora UX, pero valida siempre en servidor.


Usa «fieldset»> para agrupar campos de formulario relacionados y «legend» para titular el grupo, mejorando la organización y accesibilidad de tus formularios HTML.


Aprende a usar «label» en HTML para asociar texto con campos de formulario mediante los atributos for e id (explícita) o anidando (implícita).


Descubre los tipos de «input» que HTML5 añadió: email, url, tel, number, range, date, time, color y más para formularios modernos y usables.


Explora los tipos de «input» HTML más comunes: text, password, email, number, date, checkbox, radio, file, submit y más para tus formularios.


Descubre los atributos clave de la etiqueta «form» en HTML: action, method, enctype, novalidate, target y autocomplete para controlar el envío de datos.


Aprende a crear un formulario HTML básico con «form», «label», «input», «textarea» y «button type="submit"» para recoger datos de tus usuarios.


La gestión del foco controla qué elemento tiene la atención del teclado. Es vital para la accesibilidad, usando HTML (tabindex) y JavaScript (.focus()).


Crea formularios HTML accesibles con etiquetas («label») correctas, «fieldset», required, mensajes de error claros y buena navegabilidad por teclado.


Descubre herramientas como axe DevTools, WAVE y Lighthouse para evaluar la accesibilidad de tu HTML y mejorar la experiencia de todos tus usuarios.


Aprende a optimizar tu web para una navegación exclusiva con teclado: orden del foco, elementos interactivos, tabindex y enlaces de «saltar al contenido».


El contraste de color es vital para la legibilidad en HTML y la accesibilidad web (a11y). Aprende qué es, su impacto y cómo cumplir con los estándares WCAG.


Crea tablas HTML accesibles usando «caption», «thead», «th» con scope y más. Asegura que tus datos tabulares sean comprensibles para todos los usuarios.


Crea formularios HTML accesibles usando «label», «fieldset», «legend», indicaciones claras y validación. Mejora la experiencia para todos y cumple con a11y.


Aprende a usar el atributo lang en HTML para declarar el idioma de tu página () y de fragmentos específicos, mejorando accesibilidad y SEO.


Haz tus imágenes HTML accesibles con el atributo alt. Aprende a escribir buen texto alternativo y a tratar imágenes decorativas (alt="") para una web inclusiva.


Un buen HTML semántico es clave para la accesibilidad web (a11y). Descubre cómo etiquetas como  o  ayudan a las tecnologías de asistencia.


La accesibilidad web (a11y) es vital para que todos, incluyendo personas con discapacidad, usen la web. Descubre por qué es un derecho y un beneficio global.


Descubre WAI-ARIA: qué es y cuándo usar atributos ARIA como role, aria-label o aria-expanded para hacer tu contenido web y aplicaciones más accesibles.


El atributo role en HTML, parte de ARIA, define la función de un elemento para mejorar la accesibilidad web. Aprende cómo usarlo con tecnologías de asistencia.


El atributo tabindex en HTML controla el foco y la navegación por teclado. Aprende a usar 0, -1 y por qué evitar valores positivos para mejorar la accesibilidad.


El atributo download en enlaces HTML («a») sirve para que el navegador descargue el recurso enlazado en vez de navegar a él. Aprende a usarlo y sus opciones.


Aprende a usar atributos data-* en HTML para almacenar datos personalizados en tus elementos y cómo acceder a ellos fácilmente con JavaScript usando dataset.


El atributo hidden en HTML oculta elementos no relevantes. Aprende cómo funciona, su impacto en accesibilidad y cómo manipularlo con JavaScript.


El atributo contenteditable en HTML permite a los usuarios editar texto y contenido directamente en la página. ¡Descubre cómo funciona y sus aplicaciones!


Optimiza la carga de JavaScript en HTML con async y defer. Aprende cómo estos atributos en «script» mejoran el rendimiento y la velocidad de tu página web.


Descubre cómo loading="lazy" en HTML mejora el rendimiento al diferir la carga de imágenes e iframes hasta que son visibles. ¡Optimiza la velocidad de tu web!


El atributo viewport en la etiqueta  de HTML controla cómo tu web se muestra en dispositivos. Usa width=device-width, initial-scale=1.0 para un diseño adaptable.


La etiqueta  en HTML define la codificación de caracteres de tu web, asegurando que acentos y símbolos se muestren correctamente.


Aprende sobre microdatos HTML: usa itemscope, itemtype, itemprop y Schema.org para datos estructurados. Mejora el SEO y consigue «rich snippets» en buscadores.


Haz que un enlace descargue archivos con el atributo download en HTML. Puedes sugerir un nombre de archivo.


HTML ofrece atributos para mejorar la seguridad: rel="noopener noreferrer" en enlaces, sandbox en iframes, e integrity para scripts. ¡Protege tu web!


id es un identificador único por página (anclajes, JS). class agrupa elementos para CSS reutilizable o JS. ¡Entiende sus diferencias clave en HTML!


Los atributos globales HTML (id, class, style, title, lang) se pueden usar en cualquier etiqueta para añadir funcionalidades comunes. ¡Conócelos!


Verifica la semántica HTML con validadores (W3C), herramientas de accesibilidad (Lighthouse, Axe, WAVE) y linters. ¡Asegura un código de calidad!


Sí, la jerarquía de encabezados («h1»-«h6») es vital para la semántica HTML, accesibilidad y SEO. ¡Aprende a estructurar tus títulos correctamente!


La etiqueta «time» representa fechas y horas de forma semántica y legible por máquinas con el atributo datetime. ¡Mejora SEO e interoperabilidad!


Estructura páginas HTML complejas con semántica: usa «header», «nav», «main», «footer», «article», «section» y encabezados lógicos.


Las etiquetas «details» y «summary» crean desplegables (acordeones) nativos en HTML para mostrar/ocultar info sin JS. ¡Ideal para FAQs y contenido extra!


Con «figure» y «figcaption» agrupa contenido auto-contenido (imágenes, código) con su leyenda.


«Header» y «footer» en HTML: úsalos a nivel de página (logo, copyright) o de sección (título de artículo, autor). ¡Estructura semántica para tu web!


La etiqueta «nav» define bloques de navegación principales: menú del sitio, tabla de contenidos, «migas de pan». ¡Guía a tus usuarios de forma semántica!


La etiqueta «aside» es para contenido tangencialmente relacionado al principal: barras laterales, publicidad, enlaces relacionados.


«article» vs «section»: «article» es contenido auto-contenido e independiente (un post). «section» agrupa por tema.


La etiqueta «main» define el contenido principal y único de tu página. Solo debe haber una visible. ¡Clave para la accesibilidad y el SEO de tu sitio!


Etiquetas semánticas vs «div»: prioriza la semántica. Usa «div» para estilo (CSS) o JS si no hay etiqueta con significado. ¡Evita la «divitis»!


HTML semántico: usa etiquetas («article», «nav») por su significado. Logra mejor accesibilidad, SEO y código legible.


Usa la etiqueta «q» para citas cortas en línea. Los navegadores añaden comillas automáticamente. ¡Aprende a citar correctamente dentro de tus párrafos!


La etiqueta «blockquote» se usa para citas extensas de otras fuentes. Aprende a atribuir con el atributo cite o los elementos «footer» y «cite».


Inserta saltos de línea con «br» para dividir texto (direcciones, poemas) y líneas horizontales con «hr» para rupturas temáticas.


La etiqueta «a» (enlace) usa atributos como href (destino), target (dónde abrir), rel (relación y seguridad) y download. ¡Domina los hipervínculos!


Usa «h1»-«h6» para crear encabezados HTML y estructurar contenido. «h1» para el título principal, sigue la jerarquía. ¡Importante para SEO y accesibilidad!


Muestra código en HTML usando «code» para fragmentos y «pre»«code» para bloques, conservando formato.


Las entidades HTML (


HTML tiene 3 tipos principales de listas: no ordenadas , ordenadas y de descripción . Conoce también «menu» para listas de comandos.


Aprende a crear listas en HTML:  para listas no ordenadas (viñetas) y  para listas ordenadas (números). Usa  para cada elemento.


es vital para el diseño adaptable.


La etiqueta  define la codificación de caracteres de tu HTML, asegurando que acentos y símbolos se vean bien. ¡Esencial para tu web!


La sección «head» HTML contiene metadatos cruciales: «title», «meta» (charset, viewport, descripción), «link» para CSS y más. ¡Configura tu página!


La etiqueta  es la raíz de tu página. Aprende su función y atributos clave como lang para el idioma, esencial para accesibilidad y SEO.


Descubre la estructura mínima de un HTML5: «!DOCTYPE html», «html», «head» con «meta charset» y «title», y «body». ¡La base de toda página web!


Usar HTML moderno (HTML5+) mejora la semántica, accesibilidad, SEO, y rendimiento de tu web. ¡Aprovecha sus funcionalidades nativas y crea mejores sitios!


Un navegador lee tu HTML, construye el DOM (Modelo de Objetos del Documento), aplica CSS y «pinta» la página. ¡Descubre el proceso de renderizado!


¿Quieres aprender HTML desde cero? Sigue estos pasos: entiende lo básico, elige editor, practica con etiquetas esenciales y consulta recursos como MDN.


HTML5 es la base de la web moderna, con nuevas etiquetas y APIs. Hoy es un «estándar vivo» que evoluciona. ¡Descubre sus claves y por qué usarlo!


El  es crucial: esta declaración indica al navegador que tu página es HTML5, asegurando el «modo estándar» para una correcta visualización.


¿Software especial para HTML? No lo necesitas. Aprende a escribir HTML con editores de texto simples o avanzados y visualízalo en cualquier navegador web.


HTML, CSS y JavaScript: el trío esencial de la web. HTML estructura, CSS estiliza y JS da interactividad. ¡Aprende cómo se complementan estas tecnologías!


HTML fue creado por Tim Berners-Lee. Hoy, el WHATWG lo mantiene como un «estándar vivo» con el W3C. ¡Descubre quién está detrás de la web!


¿Es HTML un lenguaje de programación? Entiende la diferencia clave: HTML es un lenguaje de marcado para estructurar contenido, no para lógica de programación.


Descubre qué es HTML (Lenguaje de Marcado de Hipertexto) y cómo esta tecnología fundamental sirve para estructurar todo el contenido de las páginas web.


Confirma la existencia de validadores de CSS online (como el del W3C) y su utilidad para detectar errores de sintaxis y asegurar código estándar.


¿Tu CSS es adaptable? Prueba redimensionando, con DevTools (emulador) y en móviles reales para una UX óptima en toda pantalla. ¡Comprueba ahora!


Descubre por qué el uso excesivo de !important en CSS rompe la cascada, dificulta el mantenimiento y es una mala práctica, reservándolo para casos extremos.


CSS: Selecciona ítems de lista con :nth-child(n). Usa números, odd/even o fórmulas para el primer, último o cualquier elemento. ¡Control preciso!


Pseudo-elementos CSS (::before, ::after) estilizan partes de un elemento o añaden contenido sin HTML extra. Descubre cómo usar ::first-letter y más.


Descubre cómo las pseudo-clases CSS (:hover, :focus, :nth-child()) permiten estilizar elementos basados en estados o posición, sin HTML extra.


Distingue entre selectores descendientes (ej. div p), que afectan a cualquier nivel de anidamiento, y selectores de hijo directo (div > p), más específicos.


Explora cómo los selectores de atributo en CSS permiten estilizar elementos HTML basándose en la presencia o el valor específico de sus atributos.


Aprende cuándo usar selectores de ID (para unicidad, anclajes, JS) frente a clases (para estilos reutilizables), priorizando clases para estilizar en CSS.


Confirma que sí es posible posicionar elementos respecto a la ventana del navegador (viewport) usando principalmente position: fixed; en CSS.


Aprende a superponer texto sobre una imagen con CSS usando position: relative en un contenedor y position: absolute para el texto.


Entiende qué es un contexto de apilamiento en CSS: una unidad de elementos que se apilan juntos, aislando el comportamiento de z-index en su interior.


Descubre cómo z-index en CSS controla el orden de apilamiento (superposición) de elementos posicionados y la importancia de los contextos de apilamiento.


Aprende qué es position: sticky; en CSS, un híbrido entre relative y fixed, y cómo usarlo para crear cabeceras que se pegan al hacer scroll.


Descubre cómo la propiedad overflow en CSS (visible, hidden, scroll, auto) controla el comportamiento del contenido que excede las dimensiones de un elemento.


Entiende las diferencias clave entre border (ocupa espacio, parte del box model) y outline (no ocupa espacio, para foco/depuración) en CSS.


Conoce cómo max-width limita la anchura máxima de un elemento y min-width asegura una anchura mínima, claves para el diseño adaptable en CSS.


Aprende qué es el colapso de márgenes verticales en CSS, cuándo ocurre (elementos adyacentes, padre-hijo) y cómo evitarlo con padding, borde o BFCs.


CSS: box-sizing: border-box; hace que el width y height de un elemento incluyan su padding y border, evitando cálculos complejos y haciendo el tamaño total más predecible.


Entiende cómo position: fixed; en CSS posiciona un elemento respecto al viewport, manteniéndolo fijo durante el scroll. Ideal para cabeceras o notificaciones.


Explora estrategias para tablas de datos adaptables en CSS, como el scroll horizontal o la reorganización de filas en formato de tarjetas en móviles.


Descubre cómo usar media queries junto con display: none; (u otros valores de display) para ocultar o mostrar elementos CSS en diferentes pantallas.


Aprende la técnica CSS clave para imágenes adaptables: max-width: 100%; height: auto; para que se ajusten a sus contenedores sin desbordar.


Descubre cómo crear un sistema de columnas simple y flexible con CSS Grid usando display: grid, grid-template-columns (con fr o repeat()) y gap.


¡Sí! Aprende cómo anidar contenedores Flexbox dentro de ítems Grid y viceversa para aprovechar las fortalezas de ambos sistemas de layout en CSS.


Comprueba que sí y que es recomendable combinar CSS Grid (para macro-layout) y Flexbox (para micro-layout y alineación) para crear diseños adaptables complejos.


Conoce la propiedad gap en CSS y cómo define el espacio (canalones) entre ítems en Flexbox y entre pistas (filas/columnas) en Grid de forma sencilla.


Descubre cómo usar grid-template-areas en CSS Grid para definir layouts visuales con nombres, asignando ítems con grid-area de forma intuitiva.


Entiende la unidad fr (fraccional) en CSS Grid: cómo representa una fracción del espacio disponible para crear diseños de cuadrícula flexibles.


Entiende flex-grow (crecer), flex-shrink (encoger) y flex-basis (tamaño base) para controlar la flexibilidad de los ítems en un contenedor Flexbox.


Aprende a alinear ítems en un contenedor Flexbox usando justify-content (eje principal) y align-items (eje transversal), entre otras propiedades.


Aprende a usar text-shadow en CSS para añadir efectos de sombra al texto, controlando desplazamiento, desenfoque y color para mejorar la estética.


Conoce las fuentes variables en CSS: un solo archivo con múltiples variaciones (peso, ancho) y sus ventajas en rendimiento y flexibilidad de diseño.


Descubre cómo usar letter-spacing para ajustar el espacio entre caracteres y word-spacing para el espacio entre palabras en CSS, mejorando tipografía.


Entiende la propiedad line-height en CSS: cómo controla el espacio vertical entre líneas de texto y su impacto crucial en la legibilidad.


Descubre cómo establecer un color de fondo por defecto para tu página web usando background-color en body o html, y como fallback para imágenes.


Aprende a crear degradados lineales (linear-gradient()) y radiales (radial-gradient()) en CSS para fondos y efectos visuales atractivos.


Comprueba que sí, es posible aplicar múltiples imágenes de fondo (y gradientes) a un solo elemento en CSS, separándolas por comas para efectos de capas.


Entiende cómo background-size en CSS (con valores como cover o contain) controla el tamaño de las imágenes de fondo para ajustarlas al contenedor.


Aprende a usar background-repeat y background-position en CSS para controlar cómo se repite una imagen de fondo y dónde se ubica en el elemento.


Descubre cómo usar background-image: url(); en CSS para establecer una imagen de fondo en elementos HTML y consideraciones para su visualización.


Descubre para qué efectos visuales son ideales las animaciones CSS: microinteracciones, transformaciones, bucles y efectos decorativos sin lógica compleja.


Comprueba que sí, puedes pausar y controlar animaciones CSS con JavaScript manipulando la propiedad animation-play-state (paused/running).


Aprende a usar animation-iteration-count en CSS para que una animación se repita un número específico de veces o en un bucle infinito.


Descubre cómo usar la regla @keyframes en CSS para definir animaciones complejas con múltiples pasos intermedios (fotogramas clave) y cambios de estilo.


Conoce las propiedades clave para controlar animaciones CSS: animation-name, duration, timing-function, delay, iteration-count, direction, etc.


Entiende las funciones de temporización (ease, linear, cubic-bezier()) en transiciones CSS, que controlan la aceleración y ritmo del cambio.


Aprende a crear transiciones CSS simples con la propiedad transition para suavizar cambios de estilo (ej. en :hover) definiendo propiedad y duración.


Aprende cuándo usar rem (accesibilidad, escalado global), em (escalado dentro de componentes) o px (valores fijos) para fuentes y espaciados en CSS.


Aprende a usar clamp(), min() y max() en CSS con unidades vw para controlar el tamaño de fuente, evitando textos ilegibles en diferentes pantallas.


Descubre para qué diseños son ideales las unidades de viewport (vw, vh): secciones a pantalla completa, tipografía adaptable y layouts fluidos.


Entiende las unidades vw (1% ancho viewport) y vh (1% alto viewport) en CSS y cómo permiten dimensionar elementos en relación a la ventana.


¿CSS roto en móviles? Causas: unidades fijas, overflow, media queries mal usadas, Flexbox/Grid. ¡Depura y mejora tu diseño adaptable!


CSS limpio y eficiente: Organiza tu código, usa nombres semánticos, variables CSS y baja especificidad. ¡Optimiza para calidad y mantenimiento!


Descubre estrategias efectivas para solucionar conflictos de especificidad en CSS, usando DevTools, ajustando selectores y entendiendo el orden del código.


Aprende cómo se calcula la especificidad en CSS mediante un sistema de pesos (IDs, clases, elementos) para determinar qué regla de estilo prevalece.


Conoce las diferencias cruciales entre display: none; (elimina del flujo y espacio) y visibility: hidden; (oculta pero reserva espacio) en CSS.


Aclara si CSS es un lenguaje de programación. Entiende por qué se considera un lenguaje de hojas de estilo declarativo y no uno de programación tradicional.


Descubre cómo usar comentarios (/* comentario */) en CSS para explicar código, organizar hojas de estilo, depurar y dejar notas para mejorar la mantenibilidad.


HTML vs CSS: Entiende la diferencia. HTML estructura el contenido web (el «qué»), mientras CSS define su estilo y presentación visual (el «cómo»).


Aprende la sintaxis fundamental de una regla CSS, compuesta por un selector y un bloque de declaración con propiedades y valores para estilizar elementos HTML.


Descubre la herencia en CSS: cómo ciertas propiedades de elementos padre se transmiten a sus hijos y cuáles son las propiedades que típicamente se heredan.


Entiende cómo funciona la cascada en CSS: el algoritmo que resuelve conflictos entre estilos considerando origen, importancia, especificidad y orden.


Aprende las tres formas de incluir CSS (en línea, interno, externo) y por qué las hojas de estilo externas son la opción recomendada para la mayoría de proyectos.


Explora las funciones y selectores CSS más prometedores como :has(), subgrid, animaciones por scroll, nesting, View Transitions y más.


Descubre las container queries en CSS (@container): cómo permiten que los componentes se adapten al tamaño de su contenedor, no solo del viewport.


Entiende las capas de cascada (@layer) en CSS: cómo definen un orden de precedencia explícito para gestionar la especificidad en proyectos grandes.


Soluciona conflictos de especificidad CSS: inspecciona con DevTools, ajusta selectores, revisa orden y usa @layer. ¡Evita !important para CSS limpio!


Descubre los pasos clave para depurar CSS que no se aplica: revisar sintaxis, enlace, especificidad con DevTools, caché y aislar el problema.


¡Sí! Aprende cómo modificar variables CSS dinámicamente con JavaScript usando element.style.setProperty('--variable', 'valor') para interactividad.


Conoce las ventajas de las variables CSS para temificación (cambio fácil de temas) y mantenimiento (punto único de verdad, código legible y DRY).


Descubre el alcance de las variables CSS: cómo definirlas globalmente (en :root) o localmente en selectores específicos, y cómo funciona la herencia.


Aprende la sintaxis para definir variables CSS (--nombre: valor;) y usarlas con la función var(--nombre, fallback) para código reutilizable.


Descubre cómo RGBA y HSLA en CSS permiten aplicar transparencia a los colores mediante el canal alfa, para fondos o textos semitransparentes.


Aprende a usar la regla @font-face en CSS para cargar y aplicar fuentes personalizadas en tu web, asegurando una tipografía consistente.


Descubre el enfoque «Mobile First»: diseñar para móviles primero y luego mejorar para pantallas grandes, y sus ventajas en rendimiento, UX y SEO.


Conoce los breakpoints (puntos de corte) comunes en diseño adaptable, aunque la mejor práctica es definirlos según el contenido y no por dispositivos.


Aprende a usar media queries en CSS para aplicar estilos específicos según el tamaño de pantalla, permitiendo adaptar tu diseño a diferentes dispositivos.


Centrar un elemento perfectamente, tanto en el eje horizontal como en el vertical, dentro de un contenedor padre es una de las tareas que Flexbox simplifica enormemente.


Aprende las propiedades esenciales para crear una cuadrícula con CSS Grid: display: grid, grid-template-columns, grid-template-rows y gap.


Conoce las propiedades clave de un contenedor Flexbox: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content y gap.


Distingue entre position: relative (posiciona respecto a su lugar original) y position: absolute (respecto a un ancestro posicionado o el viewport).


Aclara la diferencia entre margin (espacio exterior al borde, para separar elementos) y padding (espacio interior, entre contenido y borde) en CSS.


Descubre los selectores CSS más comunes: universal, de tipo, clase, ID, atributo y agrupados, y cómo usarlos para estilizar elementos HTML.


Conoce las ventajas clave de CSS: separación de contenido y presentación, mantenimiento fácil, consistencia visual, reutilización de estilos y mejor rendimiento.


Aprende a usar DevTools (F12) para inspeccionar y depurar CSS: edita estilos en vivo, revisa la cascada y el box model. ¡Domina tus estilos CSS!


Distingue entre unidades absolutas (ej. px, fijas) y relativas (ej. em, rem, %, vw, escalan con referencia) en CSS y cuándo usar cada una.


Entiende las variables CSS (propiedades personalizadas): qué son, cómo se definen (--nombre: valor) y sus ventajas para la reutilización y mantenimiento.


Distingue entre transiciones CSS (cambios suaves entre dos estados por un disparador) y animaciones CSS (secuencias complejas con @keyframes).


Explora las diversas formas de definir colores en CSS: por nombre, hexadecimal (HEX), RGB/RGBA y HSL/HSLA, cada una con su sintaxis y usos.


Cambia la fuente de tu texto con font-family. Aprende a crear una lista de fuentes (font stack) y a usar familias genéricas de respaldo. ¡Tipografía fácil!


Entiende el diseño web adaptable: el enfoque para que los sitios se vean y funcionen bien en cualquier dispositivo, y su importancia crucial hoy en día.


Descubre CSS Grid Layout, un sistema de diseño bidimensional para maquetar páginas, y cuándo preferirlo o combinarlo con Flexbox (unidimensional).


Descubre CSS Flexbox, un modelo de diseño unidimensional ideal para alinear y distribuir espacio entre ítems de un contenedor de forma eficiente.


Explora los valores de la propiedad position en CSS: static, relative, absolute, fixed y sticky, y cómo afectan la ubicación de los elementos.


Entiende el Modelo de Caja de CSS (Box Model): el concepto de que cada elemento HTML es una caja con contenido, padding, borde y margen, y cómo se calcula.


Entiende qué son los selectores CSS y su importancia fundamental para apuntar y aplicar estilos a elementos HTML específicos de forma precisa.


Cambia el email de un usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita el perfil, modifica el campo «Correo electrónico» y actualiza.


Cambia el email de admin en WordPress desde «Ajustes» > «Generales». Introduce la nueva dirección y ¡haz clic en el enlace de confirmación en el correo!


Para añadir una caja de búsqueda en WordPress, usa el bloque "Búsqueda" en entradas/páginas o el widget "Búsqueda" en barras laterales/footers.


Para añadir un mapa del sitio HTML en WordPress, usa un plugin como "WP Sitemap Page" o "Simple Sitemap". Instálalo, crea una página y pega su shortcode.


Para añadir un enlace de descarga en WordPress, sube el archivo a la Biblioteca de Medios, copia su URL y pégala en un enlace de texto o botón. También puedes usar el bloque "Archivo" o plugins como Download Monitor.


Para hacer WordPress multilingüe, usa plugins como WPML, Polylang, TranslatePress o Weglot.


Configura la caché en WordPress instalando un plugin. Activa caché de página, caché del navegador, minificación CSS/JS y borra la caché tras cambios para mejorar la velocidad.


Las entradas son contenido dinámico (blog), organizado por categorías. Las páginas son contenido estático (contacto), jerárquico. Ambas tienen propósitos distintos.


La curva de aprendizaje de WordPress es suave para lo básico (instalación, contenido), moderada para personalización (Personalizador, page builders) y pronunciada para desarrollo avanzado y optimización.


Actualiza temas de WordPress haciendo copia de seguridad y usando tema hijo. Hazlo desde Escritorio > Actualizaciones, o manualmente vía FTP tras descargar la nueva versión y desactivar/eliminar la antigua.


Cambia el logo de WordPress vía Apariencia > Personalizar > Identidad del sitio (temas clásicos) o Apariencia > Editor (temas de bloques), seleccionando el bloque de logo y subiendo tu imagen.


Agrega un favicon a WordPress fácilmente. Prepara una imagen 512x512px, ve a Apariencia > Personalizar > Identidad del sitio, sube tu "Icono del sitio" y publica.


Configura los ajustes generales de WordPress en Ajustes > Generales. Define título, descripción, URL, email de admin, opciones de registro, zona horaria y formatos de fecha/hora.


Los "enlaces permanentes" son las URL fijas de tu contenido en WordPress. Configúralos en Ajustes > Enlaces permanentes. La opción "Nombre de la entrada" es la más recomendada por ser amigable para SEO y usuarios.


Plugins esenciales para WordPress cubren seguridad, rendimiento, SEO, copias de seguridad, formularios y optimización de imágenes. Prioriza calidad y necesidad.


Para actualizar plugins de WordPress, usa las notificaciones en Escritorio > Actualizaciones o Plugins > Plugins instalados y haz clic en "Actualizar ahora". En caso de error, puedes actualizar manualmente vía FTP. ¡Haz siempre copia de seguridad!


Para activar/desactivar plugins en WordPress, ve a Plugins » Plugins instalados. Haz clic en "Activar" bajo un plugin inactivo o en "Desactivar" bajo uno activo.


No hay un límite de cuántos plugins son demasiados en WordPress; la clave es la calidad, necesidad, rendimiento y seguridad. Prioriza plugins esenciales, bien codificados y actualizados.


Inserta videos de YouTube/Vimeo en WordPress pegando la URL directamente en el editor de bloques (método oEmbed) o usando el bloque "HTML Personalizado" para códigos de inserción con más control.


Para añadir imágenes o galerías en WordPress, usa el editor de bloques. Añade el bloque "Imagen" o "Galería", sube/selecciona medios, luego ajusta su apariencia y opciones de enlace.


Revisa y restaura revisiones de entradas/páginas en WordPress desde la barra lateral del editor. Navega por el historial y recupera versiones anteriores.


Programa publicaciones en WordPress desde el editor. En «Estado y visibilidad», selecciona una fecha y hora futura, luego haz clic en «Programar».


Crea y gestiona categorías y etiquetas para entradas en «Entradas» > «Categorías»/«Etiquetas». Organizan tu contenido. Con FSE, se muestran con bloques de lista.


Usa bloques en WordPress (Gutenberg) para añadir y organizar contenido (párrafos, imágenes) arrastrando y soltando. Configura cada bloque en el panel lateral.


Crea menús desplegables en WordPress arrastrando elementos bajo el padre en «Apariencia» > «Menús». En temas FSE, usa el bloque «Navegación» y anida los elementos directamente.


Agrega enlaces personalizados a menús en WordPress desde «Apariencia» > «Menús» > «Enlaces personalizados». Para temas FSE, hazlo en el bloque «Navegación» del Editor de Sitios.


Crea y gestiona menús en WordPress desde «Apariencia» > «Menús». Añade y organiza elementos. Para temas FSE, usa el bloque «Navegación» en el Editor de Sitios.


Optimiza imágenes para WordPress: redimensiona, comprime (TinyPNG, Smush) y usa formatos como WebP. Esencial para la velocidad de carga de tu web.


Los «Custom Fields» añaden metadatos extras a tu contenido (ej. «Tiempo de preparación»). Úsalos con plugins como Advanced Custom Fields (ACF) para estructurar datos.


Los «Custom Post Types» (CPT) son tipos de contenido únicos (ej. «Receta»). Organizan información específica. Créalos con plugins (CPT UI) o con código PHP.


Agrega JavaScript personalizado a WordPress con plugins de fragmentos de código. También puedes usar wp_enqueue_script() en el functions.php de un tema hijo.


Añade CSS personalizado en WordPress desde «Apariencia» > «Personalizar» > «CSS Adicional». Para temas FSE, usa el Editor de Sitios en «Estilos».


El archivo functions.php de tu tema de WordPress añade funciones PHP y personalizaciones. ¡Úsalo siempre en un tema hijo para proteger tus cambios!


Restaura una versión anterior de WordPress usando una copia de seguridad completa y previa a la actualización problemática (con plugin o hosting).


Soluciona conflictos de plugins/temas: haz copia de seguridad, desactiva plugins uno a uno (o todos vía FTP) o cambia el tema para aislar al culpable.


Limpia la caché de WordPress con tu plugin de caché («Limpiar caché» en WP Super Cache, WP Rocket). También desde el panel de tu hosting o tu navegador.


Soluciona el error 404 de permalinks regenerando enlaces: ve a «Ajustes» > «Enlaces Permanentes» y «Guardar cambios». Si persiste, revisa .htaccess o tu hosting.


Restablece tu contraseña de administrador de WordPress desde la página de login («¿Olvidaste tu contraseña?»). También puedes hacerlo en phpMyAdmin o vía FTP (avanzado).


Si no puedes acceder al panel de WordPress: borra caché, restablece contraseña, desactiva plugins vía FTP o edita wp-config.php.


Los datos estructurados (Schema Markup) ayudan a Google a entender tu contenido para resultados enriquecidos. Impleméntalos con plugins SEO (Rank Math, ACF).


Crea un sitemap XML en WordPress con plugins SEO (Yoast, Rank Math). WordPress 5.5+ también lo genera. Envía tu sitemap a Google Search Console.


Optimiza títulos (50-60 caracteres) y descripciones (120-158 caracteres) con tu palabra clave principal. Usa plugins SEO para previsualizar y mejorar el CTR.


Conecta WordPress a Google Search Console con «Site Kit by Google» o tu plugin de SEO. Esencial para monitorizar tu rendimiento en búsquedas de Google.


Conecta WordPress con Google Analytics 4 usando el plugin oficial «Site Kit by Google». También puedes insertar el ID de medición (G-XXXXXXXXX) manualmente.


Un plugin de SEO optimiza tu WordPress para buscadores. Recomiendo SEOPress, Yoast SEO o Rank Math. Ayudan con títulos, descripciones, sitemaps y más.


Significa que tu WordPress no se conecta a su base de datos. Causas: credenciales incorrectas, servidor caído o base de datos dañada. Tu sitio no funcionará.


Depura errores en WordPress activando el modo debug en wp-config.php. Cambia WP_DEBUG a true para ver mensajes o registrarlos en debug.log. Desactívalo siempre después.


La «pantalla blanca de la muerte» es un error crítico. Arréglala aumentando memoria PHP, desactivando plugins vía FTP, o cambiando el tema. Activa el modo debug para ver errores.


Las copias de seguridad son vitales para WordPress. Protegen contra fallos, hackeos y errores. Son tu seguro para restaurar el sitio y no perder datos.


Restaura tu WordPress desde una copia de seguridad usando el plugin que la creó o desde el panel de tu hosting. Es el modo más seguro de recuperación.


Haz copias de seguridad de WordPress con plugins (UpdraftPlus) o desde tu hosting. Guarda siempre las copias en un lugar externo seguro.


Desinstala un plugin de WordPress: primero desactívalo desde «Plugins» > «Plugins instalados», luego bórralo. Para limpieza total, busca opciones en sus ajustes.


Para saber si un plugin es seguro: descarga de fuentes oficiales, busca actualizaciones regulares, buenas valoraciones y soporte activo.


Para saber si un plugin es seguro: descarga de fuentes oficiales, busca actualizaciones regulares, buenas valoraciones y soporte activo.


Instala plugins en WordPress desde «Plugins» > «Añadir nuevo». Busca en el directorio oficial, sube un archivo ZIP (para premium) o vía FTP.


Un plugin de WordPress es un software que añade funciones a tu web, como formularios o tiendas online. Extiende las capacidades de WordPress sin programar.


Personaliza tu tema WordPress con el Personalizador, opciones del tema o constructores visuales. Para temas FSE, usa el Editor de Sitios. Para código, usa tema hijo.


Si tu tema no es compatible: no actualices WordPress aún. Haz copia de seguridad. Contacta al desarrollador o restaura una versión anterior.


Al elegir un tema: que sea relevante, adaptable, rápido, personalizable, compatible con plugins y con buen soporte. Revisa valoraciones y reseñas.


Instala un tema de WordPress desde «Apariencia» > «Temas» > «Añadir nuevo». Puedes buscar en el directorio o subir un ZIP. También vía FTP.


Un tema de WordPress define la apariencia y diseño de tu web. Controla colores, fuentes y disposición. Puedes cambiarlo sin perder contenido.


Usa HTTPS en WordPress: obtén un certificado SSL (gratis con tu hosting). Configura WordPress con un plugin como Really Simple SSL o manualmente.


Optimiza WordPress para SEO: usa plugins (Yoast), permalinks amigables, palabras clave, contenido de calidad, optimiza imágenes y mejora la velocidad.


Soluciona errores comunes de WordPress como la pantalla blanca o fallos de conexión. Identifica el problema, desactiva plugins/temas, o usa el modo debug.


Un tema hijo hereda el estilo del tema padre. Úsalo para personalizar tu WordPress sin perder cambios al actualizar el tema principal. Es una buena práctica.


Detecta malware en WordPress por síntomas o con plugins de seguridad. Elimínalo restaurando copia limpia o limpiando archivos/base de datos.


Protege tu login de WordPress limitando intentos, usando 2FA, cambiando la URL y con CAPTCHA. Es vital contra ataques de fuerza bruta.


Si tu WordPress es hackeado: no entres en pánico. Desconecta, contacta al hosting, cambia contraseñas, restaura copia limpia, escanea y limpia malware.


Un cortafuegos (WAF) para WordPress filtra y bloquea tráfico malicioso antes de que llegue a tu web. Es una barrera de seguridad contra ataques externos.


Mantén tu WordPress actualizado desde «Escritorio» > «Actualizaciones». ¡Haz siempre una copia de seguridad! Crucial para seguridad, rendimiento y compatibilidad.


Protege tu WordPress: actualiza todo, usa contraseñas fuertes, plugins de confianza, instala seguridad (Wordfence) y haz copias de seguridad. Usa HTTPS.


Un CDN entrega tus archivos desde servidores cercanos al usuario, acelerando tu web globalmente. Lo necesitas si tienes audiencia internacional o mucho contenido.


Si no puedes acceder, crea un admin desde phpMyAdmin. Inserta usuario y contraseña MD5 en wp_users y asigna perfil de admin en wp_usermeta.


Comprime imágenes para WordPress: redimensiona, usa herramientas (TinyPNG) o plugins (Smush) y el formato WebP. Vital para la velocidad y el SEO de tu web.


Optimiza tu base de datos de WordPress limpiando revisiones, spam y datos innecesarios. Usa plugins como WP-Optimize para mantenerla eficiente y rápida.


La caché guarda versiones estáticas de tu web. Así, tu servidor trabaja menos y tu sitio carga más rápido, mejorando rendimiento y experiencia de usuario.


Mejora tu WordPress: elige buen hosting, usa caché (WP Super Cache), optimiza imágenes y CDN. Mantén todo actualizado y elimina plugins innecesarios.


Para cambiar tu nombre público en WordPress, ve a Usuarios > Tu perfil, busca la sección "Nombre", define un "Apodo" y selecciónalo en el desplegable "Mostrar este nombre públicamente como", luego "Actualizar perfil".


Asigna y cambia roles de usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita el perfil y selecciona el nuevo rol en «Perfil». Solo admins.


Crea nuevos usuarios en WordPress desde «Usuarios» > «Añadir nuevo». Rellena datos (usuario, email, contraseña) y asigna un perfil para controlar permisos.


Gestiona perfiles de usuario en WordPress desde «Usuarios» > «Todos los usuarios». Edita información personal, cambia contraseñas y asigna roles.


Los perfiles de usuario definen permisos en WordPress. Desde «Administrador» con control total a «Suscriptor» con acceso limitado. Clave para seguridad y gestión.


Gestiona tus medios en WordPress desde «Medios» > «Biblioteca». Sube, organiza, edita metadatos (alt text para SEO) y optimiza tus archivos visuales.


El editor de bloques (Gutenberg) es el editor visual de WordPress. Te permite crear contenido arrastrando y soltando «bloques». Diseña páginas y entradas.


Para crear una página de inicio estática en WordPress, crea una página "Inicio", opcionalmente una para "Blog", y luego ve a Ajustes > Lectura para seleccionarlas como portada y página de entradas.


Para cambiar tu nombre de usuario en WordPress, lo más seguro es crear un nuevo administrador y eliminar el antiguo, asignando el contenido.


Configura tu portada de WordPress. Crea dos páginas («Inicio» y «Blog»). En «Ajustes» > «Lectura», asigna «Inicio» como portada y «Blog» para tus entradas.


Activa/desactiva comentarios en WordPress. Hazlo globalmente en «Ajustes» > «Comentarios» o individualmente desde el editor de cada entrada/página.


Instala WordPress localmente con XAMPP, WAMP o MAMP. Crea una base de datos en phpMyAdmin, descarga WordPress y ejecuta el instalador desde tu navegador.


Un dominio es la dirección de tu web (ej. tudominio.com). Cómpralo y apúntalo a tu hosting con los servidores DNS. Así los usuarios te encontrarán.


El hosting es el «hogar» de tu web. Almacena todos los archivos de WordPress y lo hace visible 24/7 en internet. Es esencial para que tu sitio funcione.


display: block vs inline en CSS: block ocupa todo el ancho y nueva línea; inline fluye con su contenido. ¡Controla tu layout y dimensiones!


Cambia la URL de tu WordPress en «Ajustes» > «Generales». Actualiza ambas direcciones. Si hay fallos, edita wp-config.php o phpMyAdmin. Actualiza enlaces.


Cambia el idioma de WordPress fácilmente. Ve a «Ajustes» > «Generales», selecciona el idioma en «Idioma del sitio» y guarda los cambios.


WordPress es un sistema de gestión de contenidos (CMS) de código abierto para crear y gestionar webs. Es líder mundial por su facilidad, temas y plugins.


El software WordPress es gratis, ¡sí! Pero necesitarás pagar un hosting y un dominio para tu web. Plugins y temas premium son opcionales y pueden costar.


WordPress es seguro si lo mantienes actualizado, usas contraseñas fuertes, plugins de confianza y haces copias de seguridad. La seguridad depende de ti.


Para instalar WordPress necesitas PHP 7.4+ o superior, MySQL 8.0+ o MariaDB 10.5+, un servidor web (Apache/Nginx), HTTPS y al menos 1GB de espacio.


Crea cualquier web con WordPress: blogs, tiendas online, webs corporativas, portfolios, revistas. Su flexibilidad con temas y plugins es inigualable.


No necesitas programar para usar WordPress. Su editor visual, temas y plugins permiten crear webs sin código. Es fácil para principiantes.


WordPress.org te da control total con tu propio hosting. WordPress.com es servicio simple con límites. Elige la plataforma ideal según tu control deseado.


Instala WordPress fácilmente. Paso a paso para descargar, subir archivos y configurar tu web con autoinstalador o manualmente.


Aprende a cambiar el color de fondo de cualquier elemento HTML usando la propiedad background-color en CSS y diferentes formatos de color.


Descubre qué es CSS (Hojas de Estilo en Cascada) y cómo este lenguaje de diseño gráfico define la apariencia y el formato de documentos HTML, controlando estilos.



> ## Sitemap de Preguntas y Respuestas

- [Preguntas Frecuentes Sitemap](https://joseramonbernabeu.com/pregunta-sitemap1.xml)