Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

CSS

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Navegando entre páginas y actividad Haga lo que hicimos en aula

por David Enoc Leal Galvis
| 28.7k xp | 119 posts
  1. Estilizando el encabezado con CSS (style.css)
    /* Reset básico */
  • { box-sizing: border-box; }
    body { margin: 0; font-family: 'Montserrat', system-ui, Arial, sans-serif; }

/* Encabezado /
.cabecera {
background: #111; / color de fondo del header /
padding: 12px 5%; / espaciado interno (coherente con el contenido) */
}

.menu {
display: flex; /* enlaces en fila /
gap: 16px; / separación entre enlaces */
align-items: center;
}

.menu__link {
text-decoration: none; /* sin subrayado en el header /
color: #F6F6F6;
font-size: 16px;
padding: 10px 14px; / área clickeable */
border-radius: 6px;
transition: color .2s ease, background .2s ease, transform .2s ease;
}

.menu__link:hover {
color: #22D4FD;
background: #272727;
transform: translateY(-1px);
}

Si aún no importaste la fuente, recuerda en

:
  1. Ajustando el espaciado del contenido para alinearlo con el header

Alinea el contenido con el mismo “marco” (5%) que usamos en la cabecera:

/* Contenido principal /
.presentacion, / si ya la tienes /
main { / o aplica a main genérico /
padding: 5%;
max-width: 1100px; / opcional: limitar ancho de lectura /
margin: 0 auto; / centrar en pantallas grandes */
}

  1. Crear y navegar a la página Sobre mí
    index.html (menú con enlace) Home Sobre mí

about.html (nueva página)

Home Sobre mí

Sobre mí

Aquí puedes contar tu historia, habilidades y objetivos.

© 2025 Tu Nombre

Comprueba que al hacer clic en “Sobre mí” desde index.html abre about.html, y que “Home” te regresa.

  1. Arreglar estilos tras mover styles.css a /styles y quitar subrayado en el header
    index.html (ruta del CSS actualizada)

styles/styles.css (quitar subrayado en enlaces del header)

Ya quedó cubierto en el bloque del punto 1:

.menu__link { text-decoration: none; }

  1. Estructurar about.html con header y footer de index

Ya lo hicimos arriba: copiamos el

y el de index.html, y añadimos un entre ambos. Verifica en el navegador que se ve el encabezado, los enlaces funcionan y el texto del pie aparece.
  1. Importar y corregir la ruta del CSS en about.html

También está aplicado arriba:

Guarda y recarga la página para confirmar que los estilos se aplican.

(Opcional) Pie de página estilizado

Si aún no lo tienes, puedes añadir este estilo:

.footer {
background: #22D4FD; /* azul claro /
color: #000000; / texto negro */
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 24px;
padding: 24px;
}

1 respuesta
por Brenda Souza
| 5999.4k xp | 21879 posts
Instructor

Hola David, espero que estés bien

Parece que estás trabajando en un proyecto web donde necesitas estilizar el encabezado y crear una página adicional "Sobre mí". Vamos a revisar algunos de los puntos que mencionaste para asegurarnos de que todo esté funcionando correctamente.

  1. Estilizando el encabezado con CSS: Parece que ya tienes un buen comienzo con el estilo de tu encabezado. Asegúrate de que el archivo styles.css esté correctamente vinculado en tu HTML para que los estilos se apliquen. Si notaste que los enlaces en el encabezado no deberían tener subrayado, ya lo has resuelto con text-decoration: none; en .menu__link.

  2. Ajustando el espaciado del contenido: Has alineado el contenido principal con el encabezado usando un padding del 5%. Esto debería alinear visualmente el contenido con el encabezado.

  3. Creando y navegando a la página "Sobre mí": Parece que ya creaste el archivo about.html y configuraste los enlaces en el menú de navegación. Asegúrate de que los enlaces funcionen correctamente al probarlos en el navegador.

  4. Ajustando el estilo después de mover styles.css a /styles: Has actualizado la ruta del archivo CSS en tu HTML, lo cual es crucial para que los estilos se apliquen. Verifica que la ruta sea correcta y que el archivo esté en la ubicación esperada.

  5. Estructurando la página "Sobre mí": Has copiado el <header> y <footer> de index.html a about.html. Esto debería mantener la coherencia visual entre las páginas. Asegúrate de que el <main> esté correctamente implementado y que el contenido se muestre como esperas.

  6. Importando y corrigiendo la ruta del CSS en about.html: La ruta del CSS parece estar correcta como ./styles/styles.css. Verifica que los estilos se carguen correctamente al abrir la página en el navegador. Si los estilos no se aplican, revisa la consola del navegador para ver si hay errores de carga.

Si al seguir estos pasos encuentras que algo no funciona como esperas, podría ser útil revisar la consola del navegador para cualquier mensaje de error que te pueda guiar hacia la solución.

Espero haber ayudado y buenos estudios!