Global styles in Svelte - Step-by-Step Execution

Concept Flow - Global styles

Create global CSS file

↓

Write styles in global scope

↓

Import global CSS in root component

↓

Browser applies styles to all components

↓

Components render with global styles applied

Global styles are written once and applied everywhere by importing a CSS file in the root Svelte component.

Execution Sample

Svelte

<style global>
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
</style>

This code sets the background color and font for the whole page using global styles in Svelte.

Execution Table

Step	Action	Effect	Result
1	Browser reads <style global>	Marks styles as global	Styles apply to entire document
2	Apply body { background-color: #f0f0f0; }	Sets background color	Page background changes to light gray
3	Apply body { font-family: Arial, sans-serif; }	Sets font family	Text uses Arial font everywhere
4	Render components	Components inherit global styles	All components show with background and font
5	Exit	No more styles to apply	Global styles fully applied

💡 All global styles applied and components rendered with these styles

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
background-color	default (white)	#f0f0f0	#f0f0f0	#f0f0f0
font-family	default (browser)	default (browser)	Arial, sans-serif	Arial, sans-serif

Key Moments - 2 Insights

Why do styles inside <style global> affect all components?

Because <style global> tells Svelte to apply these styles to the whole page, not just the current component, as shown in execution_table step 1.

What happens if you put styles without 'global' in a component?

Those styles only apply to that component's HTML, unlike global styles which apply everywhere, as seen in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what background color is applied after step 2?

A white

B #f0f0f0

C black

D transparent

💡 Hint

Check the 'Effect' and 'Result' columns in step 2 of the execution_table

At which step does the font-family change to Arial?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column describing font-family changes in execution_table

If you remove the 'global' keyword from <style>, what changes in the execution?

A Styles apply only inside the component, not globally

B Styles apply globally anyway

C Styles are ignored completely

D Styles cause an error

💡 Hint

Refer to key_moments about the difference between global and local styles

Concept Snapshot

Global styles in Svelte use <style global> to apply CSS to the whole page.
Write styles inside <style global> in any component, usually root.
These styles affect all components and HTML elements.
Without 'global', styles are scoped to the component only.
Importing global CSS files in root also applies styles globally.

Full Transcript

Global styles in Svelte let you write CSS that affects the entire page, not just one component. You do this by using the <style global> tag inside a Svelte component. When the browser reads this, it applies those styles everywhere. For example, setting the body background color or font family inside <style global> changes the look of all components and page content. If you omit 'global', styles only apply inside that component. This is useful to keep styles isolated. Global styles are usually placed in the root component so all parts of the app share them. This way, you can set fonts, colors, or layout rules once and have them everywhere.