Aplicar Estilos al Header y Tipografía en CSS

1. Definir el Archivo CSS y la Estructura HTML

Antes de comenzar, asegúrate de que tu archivo HTML esté vinculado correctamente a tu archivo CSS. Para ello, debes tener algo como esto en la sección <head> de tu HTML:

<head>
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

Ahora vamos a aplicar los estilos al header y trabajar con las fuentes y colores.

2. Ajustar el Tamaño de Fuente con REM

El tamaño de fuente puede definirse usando unidades relativas como REM, lo que ayuda a que el diseño sea más adaptable a diferentes pantallas. Un REM es igual al tamaño de fuente del elemento raíz (html). Para ajustar el tamaño base de las fuentes:

html {
    font-size: 62.5%; /* Esto establece 1rem = 10px */
}

body {
    font-size: 1.6rem; /* Esto establece el tamaño de fuente en 16px */
}

Con esto, cada 1 REM será igual a 10 píxeles, lo que hace que el cálculo de los tamaños de fuente sea más sencillo.

3. Estilos para el Header

Vamos a aplicar estilos al encabezado (header) para centrar el texto y ajustar el color. También ajustaremos el tamaño de la fuente y el color del span dentro del título.

header {
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 3.8rem; /* Tamaño de 38px */
    color: #123456; /* Color personalizado */
}

h1 span {
    font-size: 2rem; /* Tamaño de 20px */
    color: #654321; /* Color del span */
}

En este ejemplo:

  • h1 es el título principal, con un tamaño de fuente de 38 píxeles (3.8 REM) y un color personalizado.
  • h1 span se refiere al texto dentro del span, que tiene un tamaño de 20 píxeles (2 REM) y un color diferente.

4. Centralizar y Aplicar Colores

Para centrar el texto y aplicar colores personalizados, hemos utilizado la propiedad text-align: center en el header. Además, hemos aplicado colores hexadecimales únicos tanto al título como al span. Puedes elegir los colores que más te gusten.

5. Ajuste de Tipografía con REM

Como mencionamos, el uso de REM es ideal para ajustar los tamaños de fuente de manera relativa. Por ejemplo, si el encabezado (h1) tiene un tamaño de 38 píxeles, podemos ajustar el tamaño de otros elementos con relación a este:

h2 {
    font-size: 2rem; /* 20 píxeles */
}

h3 {
    font-size: 1.8rem; /* 18 píxeles */
}

6. Utilización de Variables para Colores

Para mantener consistencia en los colores de toda la página, es útil definir variables CSS. Estas te permiten reutilizar los mismos colores sin necesidad de repetirlos.

:root {
    --color-primario: #123456;
    --color-secundario: #654321;
}

h1 {
    color: var(--color-primario);
}

h1 span {
    color: var(--color-secundario);
}

De esta forma, si necesitas cambiar el color en el futuro, solo necesitas actualizar la variable en una sola ubicación.

7. Código CSS Completo para el Header

Aquí tienes el código completo para aplicar estilos al header, ajustar el tamaño de fuente y centralizar el texto:

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

header {
    text-align: center;
    padding: 20px;
}

h1 {
    font-size: 3.8rem; /* 38px */
    color: var(--color-primario);
}

h1 span {
    font-size: 2rem; /* 20px */
    color: var(--color-secundario);
}

:root {
    --color-primario: #123456;
    --color-secundario: #654321;
}

Conclusión

Con estos pasos, has aprendido cómo ajustar los tamaños de fuente utilizando REM, aplicar colores personalizados y centralizar el contenido en tu header. Además, el uso de variables para colores facilita la gestión y consistencia del diseño a lo largo de tu proyecto. En próximos pasos, puedes continuar refinando los estilos y trabajar con diferentes fuentes y efectos.

¡Sigue practicando con estos conceptos para mejorar el diseño de tu página web!

Comentarios

No comments found.