Global Styles

`<style is:global>` and imported `.css` files are global. Use them for resets, design tokens, and typography.

3 min read Level 1/5 #astro#css#global

What you'll learn

Add global styles with `is:global`
Import a global stylesheet
Define CSS custom properties site-wide

Some CSS belongs everywhere — design tokens, resets, body typography. Two ways to make a rule global in Astro.

1. `<style is:global>` in a Layout

---
// src/layouts/Base.astro
---
<html>
  <head>...</head>
  <body><slot /></body>
</html>

<style is:global>
  :root {
    --brand: #6360ff;
    --bg: #fff;
    --text: #111;
  }

  body {
    font-family: system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
  }
</style>

Inside is:global, selectors are NOT scoped. The rules apply everywhere.

2. Import a `.css` File

---
// any .astro file
import "../styles/global.css";
---

Astro bundles the CSS and includes it on every page that imports it. For a true site-wide stylesheet, import it once in your base layout.

/* src/styles/global.css */
*, *::before, *::after { box-sizing: border-box; }
:root { --brand: #6360ff; }
body { font-family: system-ui; }

Mixing Scoped and Global In One File

You can have both — a <style> for the component, and a <style is:global> for site-wide rules. (Though it’s usually cleaner to keep global rules in the base layout.)

<style is:global>
  .marketing { font-family: "Inter", sans-serif; }
</style>

<style>
  .card { padding: 1rem; }
</style>

Quick Comparison

You want…	Use
Style this component’s elements	Plain `<style>` (scoped)
Site-wide reset, tokens, body styles	`<style is:global>` in the base layout, or import a CSS file
Style a single global selector inside a component	`:global(...)` modifier

Up Next

Another scoping approach — CSS Modules.

CSS Modules →