Has trabajado con CSS y conoces el dolor: una regla escrita para .card en una página acaba pisando .card en otra. Soluciones históricas:
Astro tiene una respuesta simple: si pones un bloque <style> dentro de un archivo .astro, esos estilos solo afectan a ese archivo.
Astro añade un atributo único a los elementos del componente y lo usa para hacer scoping. Tú no ves nada de esto: escribes CSS normal.
El h1 solo se pone morado en este archivo. Si tienes otro .astro con un h1, no se verá afectado. Mágico, sin que tengas que pensar en colisiones.
A veces quieres un estilo que sí aplique a toda la página: tipografía base, colores de marca, reset. Tienes dos opciones:
1. Marca el bloque con is:global:
2. Importa un CSS desde el frontmatter:
Esa importación carga el archivo en todas las páginas que extiendan el layout que la incluye.
define:varsAstro tiene una directiva especial para pasar valores de JS a CSS:
Útil cuando un mismo componente recibe colores o tamaños como props.
El scoping es por elemento, no por archivo. Si tu componente envuelve a otro, sus reglas no llegan a los hijos. Para que afecten a un descendiente, usa el modificador :global:
Abre src/pages/index.astro. Tienes un <h1> y un <p>.
<style>...</style> (al final del archivo o donde te resulte natural)h1 con la propiedad color (ponle el color que más te guste)<p> y juega con font-size, letter-spacing...Recuerda: lo que escribas aquí está encapsulado a este archivo. Si más tarde creamos otra página con su propio <h1>, no se va a teñir.