Añadir estilo a todo el sitio

Ahora que ya tienes una página ‘Acerca de’ con estilo, ¡es hora de añadir algunos estilos globales para el resto del sitio!

Prepárate para...

• Aplicar estilos globalmente

Añade una hoja de estilo global

Sección titulada Añade una hoja de estilo global

Has visto que la etiqueta de Astro <style> tiene su propio alcance por defecto, lo que significa que sólo afecta a los elementos de su propio archivo.

Hay varias formas de definir estilos globales en Astro, pero en este tutorial, crearás e importarás un archivo global.css en cada una de tus páginas. Esta combinación de hoja de estilos y etiqueta <style> te da la capacidad de controlar algunos estilos en todo el sitio, y aplicar algunos estilos específicos exactamente donde quieras.

1. Crea un nuevo archivo en la ubicación src/styles/global.css (Primero tendrás que crear una carpeta styles).

2. Copia el siguiente código en tu nuevo archivo, global.css.

   src/styles/global.css

   html {
     background-color: #f1f5f9;
     font-family: sans-serif;
   }
   
   body {
     margin: 0 auto;
     width: 100%;
     max-width: 80ch;
     padding: 1rem;
     line-height: 1.5;
   }
   
   * {
     box-sizing: border-box;
   }
   
   h1 {
     margin: 1rem 0;
     font-size: 2.5rem;
   }

3. En about.astro, añade la siguiente sentencia import a tu frontmatter:

   src/pages/about.astro

   ---
   import '../styles/global.css';
   
   const pageTitle = "Sobre mi";
   
   const identity = {
     firstName: "Sarah",
     country: "Canada",
     occupation: "Escritor técnico",
     hobbies: ["fotografia", "observación de aves", "peñarol"],
   };
   
   const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];
   
   const happy = true;
   const finished = false;
   const goal = 3;
   
   const skillColor = "navy";
   const fontWeight = "bold";
   const textCase = "uppercase";
   ---

4. Comprueba la vista previa del navegador de tu página ‘Acerca de’ y ahora debería ver los nuevos estilos aplicados.

Pruébalo tu mismo - Importa tu hoja de estilo global

Sección titulada Pruébalo tu mismo - Importa tu hoja de estilo global

Añade la línea de código necesaria a cada archivo .astro de tu proyecto para aplicar tus estilos globales a cada página de tu sitio.

✅ ¡Enséñame el código! ✅

Añade la siguiente sentencia import a los otros dos archivos de página: src/pages/index.astro y src/pages/blog.astro.

src/pages/index.astro

---
import '../styles/global.css';
---

Realiza cualquier cambio o adición que deseas en el contenido de tu página ‘Acerca de’ añadiendo elementos HTML a la plantilla de la página, ya sea de forma estática o dinámica. Escribe cualquier JavaScript adicional en tu script frontmatter para proporcionarle valores para usar en tu HTML. Cuando estés satisfecho con esta página, confirma tus cambios en GitHub antes de pasar a la siguiente lección.

Analiza el patrón

Sección titulada Analiza el patrón

Tu página ‘Acerca de’ ahora tiene estilo usando ambos el archivo importado global.css y una etiqueta <style>.

• ¿Se aplican los estilos de ambos métodos de estilización?

  Si

• ¿Existen estilos contradictorios y, en caso afirmativo, cuál se aplica?

  Sí, <h1> tiene un tamaño de 2.5rem globalmente, pero 4rem localmente en la etiqueta <style>. La regla 4rem local se aplica en la página ‘Acerca de’.

• Describe cómo funcionan juntos global.css y <style>.

  Cuando se definen estilos contradictorios tanto a nivel global como en la etiqueta local <style> de una página, los estilos locales deberían sobrescribir cualquier estilo global. (Pero puede haber otros factores implicados, así que inspecciona siempre visualmente tu sitio para asegurarte de que los estilos se aplican correctamente).

• ¿Cómo decidir si declarar un estilo en un archivo global.css o en una etiqueta <style>?

  Si quieres que un estilo se aplique a todo el sitio, elige un archivo global.css. Sin embargo, si desea que los estilos se apliquen sólo al contenido HTML de un único archivo .astro y no afecten a otros elementos del sitio, deberá elegir una etiqueta <style>.

Checklist

Sección titulada Checklist

• Puedo añadir estilos CSS globales importando un archivo .css.

Recursos

Sección titulada Recursos

• Comparación entre la sintaxis Astro y JSX

• Etiqueta Astro <style>.

• Variables CSS en Astro