Aprender a estilizar un header con CSS es el primer gran paso para que tu portafolio web deje de verse como un documento plano y empiece a tomar forma profesional. Aquí trabajarás selectores, padding, border-radius y combinaciones de clases para lograr un encabezado limpio con logo circular, ideal si estás dando tus primeros pasos en desarrollo front-end.

¿Cómo defines una fuente global en CSS?

Lo primero que conviene establecer son los estilos generales de la página, y la tipografía es uno de ellos. Si no defines una fuente, el navegador te pone una por defecto que rara vez se ve bien.

La propiedad font-family se aplica al selector body para que afecte a todo el documento. Una buena práctica es declarar varias fuentes de respaldo separadas por comas: si la primera no está instalada, el navegador prueba con la siguiente [02:00].

css body { font-family: Arial, Helvetica, sans-serif; }

¿Qué es font-family en CSS? Es la propiedad que define el tipo de letra de un elemento. Puedes listar varias fuentes; el navegador usa la primera que encuentre disponible.

Un pequeño hábito que ayuda a mantener tu CSS legible: usa comentarios para separar secciones. Se escriben con /* texto */ y no afectan al código, solo te orientan a ti como desarrollador.

¿Cómo aplicas color de fondo y padding al header?

Con los generales listos, toca seleccionar la etiqueta header y darle personalidad. Aquí entran dos propiedades clave: el color de fondo y el espaciado interno.

Para el color puedes escribir el nombre (gray), o usar formatos como hexadecimal, RGB, HSL o HWB. Visual Studio Code te muestra una paleta interactiva al pasar el cursor sobre el valor, lo que facilita probar tonos. En este caso se usa el hexadecimal #1F1F1F, un gris muy oscuro [05:30].

El padding es el margen interno entre el contenido y los bordes del contenedor. Cuando le pasas dos valores, el primero controla arriba y abajo, y el segundo izquierda y derecha.

css header { background: #1F1F1F; padding: 10px 50px; }

¿Qué hace padding con dos valores? El primer valor aplica espacio vertical (arriba y abajo) y el segundo aplica espacio horizontal (izquierda y derecha).

Si quitas el padding, el contenido se pega literalmente al borde del header. Por eso se nota más espacio a los lados que arriba y abajo: 50 píxeles contra 10.

¿Cómo combinas selectores para estilizar imágenes anidadas?

Dentro del header hay un div con la clase image-container que envuelve la imagen del logo. Trabajar con un contenedor te da control total sobre cómo se comporta la imagen.

Primero, a la clase general .image-container se le aplica display: flex. Esta propiedad pertenece a flexbox, una herramienta poderosa para alinear elementos que se usará más adelante. Por ahora basta con dejarla puesta.

Después viene un truco útil: combinar selectores con un espacio.

css .image-container { display: flex; }

.image-container img { width: 100%; }

Escribir .image-container img significa: busca cualquier etiqueta img que esté dentro de un elemento con la clase image-container. Así estilizas todas las imágenes del portafolio que vivan dentro de ese contenedor [10:00].

¿Por qué usar width 100% en la imagen?

Porque la imagen se adapta al tamaño de su contenedor padre. Si el contenedor mide 50 píxeles, la imagen también medirá 50. Si el contenedor mide la mitad, la imagen mide la mitad. Esto te deja controlar el tamaño desde un solo lugar.

¿Cómo seleccionas un elemento por ID?

El logo del header tiene un ID único, así que se selecciona con #logo. Aquí defines el tamaño real del contenedor:

css #logo { width: 50px; }

La imagen interna toma el 100% de esos 50 píxeles. Si pusieras width: 50% en la imagen, mediría solo 25 píxeles, la mitad del padre.

¿Cómo creas una imagen circular con borde en CSS?

Un detalle visual que eleva mucho un header es convertir el logo en un círculo con borde blanco. Se logra con dos propiedades muy directas.

La primera es border-radius, que redondea las esquinas. Con 100% el contenedor se vuelve completamente circular. La segunda es border, que acepta tres valores en orden: grosor, estilo y color.

css #logo img { border-radius: 100%; border: 2px solid #FFF; }

El estilo solid crea una línea continua. También existen variantes como dotted para líneas punteadas. El color #FFF es blanco puro en hexadecimal [14:30].

¿Qué significa border 2px solid #FFF? Es un borde de 2 píxeles de grosor, con línea continua y color blanco. Los tres valores se escriben en una sola declaración.

Con estas pocas líneas tu header ya muestra un fondo gris oscuro, espaciado interno equilibrado y un logo circular enmarcado en blanco. Sencillo, pero con acabado profesional.

Habilidades y conceptos que practicaste

• Uso del selector body para aplicar estilos globales como la tipografía [01:30].
• Manejo de códigos de color hexadecimal y la paleta integrada de Visual Studio Code [05:00].
• Aplicación de padding con uno o dos valores para controlar el espaciado interno [06:30].
• Combinación de selectores (clase + etiqueta) para estilizar elementos anidados [10:00].
• Diferencia entre seleccionar por clase (.) y por ID (#) [11:30].
• Relación entre width en píxeles del contenedor y width en porcentaje del hijo [12:00].
• Creación de formas circulares con border-radius: 100% [13:30].
• Definición de bordes con grosor, estilo y color en una sola línea [14:30].

¿Cómo te quedó tu header? Cuéntame en los comentarios qué color de fondo elegiste y si probaste otra tipografía distinta a Arial.