Global styles
The first thing we have to do is get rid of that Times New Roman. (Have you seen what happens if you Google ‘Times New Roman’?)
Let’s create some global styles, by adding a src/lib/styles/index.css — you could name it anything, but this seems as good a place as any.
* {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: white;
--fg: #222;
--accent: hotpink;
}
body {
color: var(--fg);
}
input,
button {
font: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
}
button {
cursor: pointer;
}We want these styles to be used on every page. The way to do that is to import them in our root layout, src/routes/+layout.svelte:
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
+ import '$lib/styles/index.css';
let { children } = $props();
</script>While we’re here, let’s take a quick look around — we’re importing a favicon and rendering to the <head> using this special <svelte:head> element. This is something you can use in your components, and it’ll be yoinked out of wherever the component is and placed at the top of the page.
We’re also exposing a prop called children, and rendering it down here. This is how we control where page content goes.
Let’s check our stylesheet is working by changing the --fg variable.
To use a different font, first we need to install it. I’m a big fan of Fontsource, which gives you access to everything on Google Fonts and beyond in a way that’s very easy to use. Find a font you like — I’m going to use Pangolin, because pangolins are cool:
pnpm add @fontsource/pangolinThen follow the rest of the instructions on the page:
+import '@fontsource/pangolin';
* {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: white;
--fg: #222;
--accent: hotpink;
+ font-family: Pangolin, cursive;
}A cool thing you might notice: we don’t need to reload the page to see our changes. That’s because of a Vite feature called Hot Module Reloading.
One more thing we’ll add to the root layout: a wrapper element that goes around everything else. I picked a nice looking gradient from Grabient, but you don’t have to pick the same one as me.
<div class="app">
{@render children()}
</div>
<style>
.app {
position: fixed;
width: 100%;
height: 100%;
/* https://grabient.com/HQVgzAHANKDsCcMQAYCMUC0rhldHs6GywATMvqvLDKajTgGxhSnCMQvKvDLwAsMXCCFoo2fqRFZQ8CEA?angle=225 */
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
</style>