Style it up

Looking plain. Give it some atmosphere.

The page works but it looked like 1995. Now it has some atmosphere .

Astro lets you write <style> right next to your HTML, and the styles only apply to this file. No leaking, no surprises.

Notice the <div class="card"> wrapping the content, and the <style> block at the bottom. Make it your own — change colors, tweak the radius, add a rule. The polaroid follows.

✦ src/pages/index.astro — now with style live

<div class="card"> <h1>Hello, Astronaut!</h1> <p>Apollo 42 · ready for orbit.</p> </div> <style> .card { background: #0d0b2e; color: #fef3c7; padding: 1.5rem; border-radius: 12px; font-family: system-ui; } </style> ⚠ JavaScript is disabled. The editor needs it to highlight and run your code.

Scoped styles are one of Astro's gifts. Use the same .card class in another file — it won't accidentally collide with this one.

heads up: the live preview shows your real CSS. Astro adds scoping in a real project — that's automatic and we can't reproduce it in this tiny sandbox.

— page 2 —