Añade estilos para todo el sitio

Ahora que tienes una página About estilizada, ¡es hora de añadir algunos estilos globales para el resto de tu sitio!

Prepárate para…

Aplica estilos globalmente

Añade una hoja de estilos global

Has visto que la etiqueta <style> de Astro está scoped por defecto, lo que significa que solo afecta a los elementos en su propio archivo.

Hay algunas formas de definir estilos globalmente 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 para todo el sitio, y de aplicar algunos estilos específicos exactamente donde los quieres.

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

Copia el siguiente código en tu nuevo archivo, 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;
}

En about.astro, añade la siguiente declaración de import a tu frontmatter:

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

const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---

Revisa la vista previa del navegador de tu página About, y ahora deberías ver nuevos estilos aplicados!

Pruébalo tú mismo - Importa tu hoja de estilos global

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

✅ ¡Muéstrame el código! ✅

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

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

Haz cualquier cambio o adición que quieras al contenido de tu página About añadiendo elementos HTML a la plantilla de la página, ya sea estáticamente o dinámicamente. Escribe cualquier JavaScript adicional en tu script de frontmatter para proporcionarte valores para usar en tu HTML. Cuando estés contento con esta página, haz commit de tus cambios a GitHub antes de continuar con la siguiente lección.

Analiza el Patrón

Tu página About ahora está estilizada usando tanto el archivo global.css importado como una etiqueta <style>.

¿Se están aplicando estilos de ambos métodos de estilizado?

Sí
¿Hay algún estilo en conflicto, y si es así, cuáles se aplican?

Sí, el <h1> tiene un tamaño de 2.5rem globalmente, pero 4rem localmente en la etiqueta <style>. La regla local de 4rem se aplica en la página About.
Describe cómo global.css y <style> trabajan juntos.

Cuando estilos en conflicto están definidos tanto globalmente como en la etiqueta <style> local de una página, los estilos locales deberían sobrescribir cualquier estilo global. (Pero, puede haber otros factores involucrados, ¡así que siempre inspecciona visualmente tu sitio para asegurar que tus estilos estén correctamente aplicados!)
¿Cómo elegirías 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, elegirías usar un archivo global.css. Sin embargo, si quieres que los estilos se apliquen solo al contenido HTML en un solo archivo .astro, y no afectar a otros elementos en tu sitio, elegirías una etiqueta <style>.

Checklist

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

Recursos

Contribuir Comunidad Patrocinar