Make it look good

Right now your site is black text on white, edge to edge. A few lines of CSS will fix that for the whole site.

Step 1: Make a stylesheet

Inside src, make a folder called styles. Inside it, make global.css:

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

Here’s what each line does:

• max-width keeps your text in a comfortable column.
• margin-inline: auto centres that column.
• padding-inline adds space on the sides, so text doesn’t touch the edge on phones.
• font-family uses your computer’s own clean font.
• line-height adds space between lines.

Step 2: Load it in your layout

Open src/layouts/Layout.astro. Add one line inside the frontmatter, under the Nav import:

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

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

Save.

Step 3: Pick your colours

Add this to the bottom of global.css. Then change the two colours to ones you like:

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

a {
  color: #0b57d0;
}

Those codes starting with # are colours. Search “colour picker” online, pick a colour, and copy its code.

What you just did

You gave your site its own look, in one file that every page shares. Want to change the look later? Change this one file.