Global styles in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are global styles in Svelte?

Global styles are CSS rules that apply to the entire app or page, not limited to a single component. They affect all elements unless overridden.

beginner

How do you add global CSS styles in a Svelte component?

Use the <style> tag with the global attribute, like <style global>. This makes the CSS inside apply globally.

intermediate

Why should you be careful when using global styles in Svelte?

Because global styles affect everything, they can cause unexpected changes or conflicts. It's best to keep styles scoped unless you want a global effect.

beginner

How can you include a global CSS file in a Svelte project?

You can import the CSS file in your main entry file (like <code>main.js</code>) using <code>import './global.css';</code>, so styles apply everywhere.

beginner

What is the difference between scoped and global styles in Svelte?

Scoped styles apply only to the component they are written in, while global styles apply to the whole app or page.

How do you write global styles inside a Svelte component?

A <style global> ... </style>

B <style scoped> ... </style>

C <style module> ... </style>

D <style local> ... </style>

Using