## Notes I'm trying to define global styles using [[SvelteKit]] and I'm not quite sure where to put the `global.css` file. The first place I looked is the [Svelte Docs](https://svelte.dev/docs/). By using the search feature for the keyword "styling", I found the *Global Styles* page, linked below. On that page, it doesn't mention any suggestions on how to define global styles. Instead it mentions the `:global()` modifier and the `:global` block. The `:global()` modifier wraps around an CSS selector and the associated style definition is hoisted to the global level. Similarly, the `:global {}` block can wrap around multiple CSS selectors and associated styles to apply at the global level. ## Best Practices While the Svelte site doesn't mention any best practices for global styling, it makes intuitive sense to use the `:global()` modifier and `:global {}` blocks within `src/routes/+page.svelte` and `src/routes/+layout.svelte` because those files are at the highest level outside of `app.html` ## References - [Global Styles - Svelte](https://svelte.dev/docs/svelte/global-styles)