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.

Practice

1. In Svelte, which tag is used to write CSS that applies globally across the entire app?

easy

A.

B.

C.

D.

Solution

1. Step 1: Understand Svelte style scoping

   By default, styles in Svelte components are scoped locally to that component.

2. Step 2: Identify global style syntax

   To apply styles globally, Svelte uses the

Hint: Global styles use

Common Mistakes:

• Using
• Trying to use which is not a Svelte tag
• Assuming

2. Which of the following is the correct syntax to write global CSS in a Svelte component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize global style syntax options

   Svelte allows global styles either by uses

Hint: Use

Common Mistakes:

• Using
• Writing global styles without :global or
• Assuming plain <style> applies globally

3. Given this Svelte component code, what color will the <h1> text be when rendered?

<style global>
h1 { color: red; }
</style>

<h1>Hello</h1>

medium

A. Red

B. Black (default)

C. Blue

D. No color applied

Solution

1. Step 1: Analyze the global style

   The <style global> block sets all <h1> elements to color red globally.

2. Step 2: Check the <h1> element

   The <h1> text 'Hello' matches the global style and will appear red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   Global h1 color = red [OK]

Hint: Global styles affect all matching elements [OK]

Common Mistakes:

• Thinking styles are scoped locally by default
• Ignoring the
• Assuming default black color remains

4. Identify the error in this Svelte component's CSS if the intention is to apply global styles:

<style>
:global(body) {
  background: #eee;
}
</style>

medium

A. Missing

B. No error, code is correct

C. CSS property 'background' is invalid

D. Incorrect use of :global selector syntax

Solution

1. Step 1: Understand :global selector usage

   The :global() selector inside a normal <style> tag applies styles globally to the selector inside parentheses.

2. Step 2: Verify CSS correctness

   The CSS property 'background' with value '#eee' is valid and applies a light gray background.

3. Final Answer:

   No error, code is correct -> Option B

4. Quick Check:

   :global() selector works inside <style> [OK]

Hint: Use :global(selector) inside <style> for global CSS [OK]

Common Mistakes:

• Thinking
• Misunderstanding :global() syntax
• Assuming CSS property is wrong

5. You want to apply a global font style to your entire Svelte app but also have a component with a local style that overrides the font color. Which approach correctly achieves this?

hard

A. Use only normal <style> for all styles, no global styles

B. Use only

C. Use

D. Use

Solution

1. Step 1: Apply global font-family

   Use <style global> to set font-family globally so all components inherit it.

2. Step 2: Override font color locally

   Use normal <style> in the component to set font color locally, which overrides global styles.

3. Final Answer:

   Use <style global> for font-family and normal <style> for local font color override -> Option C

4. Quick Check:

   Global styles + local overrides = Use

Hint: Global styles for base, local styles for overrides [OK]

Common Mistakes:

• Trying to override global styles inside
• Using
• Not separating global and local styles properly