I know <style is:global> can be used from within an astro component to make style global what what I want a global.css file?
#how to make a .css file global?
runic forge
crude pebbleBOT
Hi @runic forge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You have two supported ways to apply global CSS from a file:
- Import a local stylesheet (bundled/optimized by Astro)
- Create e.g. src/styles/global.css
- Import it at the top of pages/components (commonly in a shared layout so it applies site‑wide):
---
// src/layouts/BaseLayout.astro
import "../styles/global.css";
const { title } = Astro.props;
---
<html>
<head><title>{title}</title></head>
<body><slot /></body>
</html>
Astro will bundle and apply these styles globally on any page that renders this layout (Import a local stylesheet, Import order tip). This is also the pattern taught in the tutorial (Add a global stylesheet, Checklist).
- Link a static stylesheet from public/ (skips bundling/optimization)
- Put CSS in public/styles/global.css
- Add a link tag in the page/layout head:
<head>
<link rel="stylesheet" href="/styles/global.css" />
</head>
Use this when you specifically want to bypass Astro’s CSS processing (Load via link tags).
Notes:
- Imported CSS is global by nature;
<style is:global>is only for inline style tags inside .astro files (Styling in Astro > Global Styles, CSS imports reference). - Prefer importing your global.css in a layout so it’s included once and applied across all pages using that layout (Import a local stylesheet, Import order tip).