Make it look good

You’ve already written styles for one component. Now you’ll add a few rules for the whole site.

Add a global stylesheet

Create src/styles/global.css:

body {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

These five rules keep your text in a comfortable column, centred on the screen, with space around it on phones.

Load it in your layout

Open src/layouts/Layout.astro and add one import at the top:

---
import Nav from '../components/Nav.astro';
import '../styles/global.css';

const { title } = Astro.props;
---

Save and look at your site. Every page has changed, because every page uses the layout.

Choose your colours

Add this to the end of global.css, and change the two colours to ones you like:

body {
  background: #fffdf7;
  color: #1f2430;
}

a {
  color: #0b57d0;
}

What you’ve done

Your site has its own look. There’s just one thing left: letting people see it.