Global styles in Svelte

Introduction

Global styles let you set CSS rules that apply to the whole app. This helps keep your look consistent everywhere.

You want all buttons in your app to have the same color and font.

You need to set a background color or font for the entire page.

You want to style HTML elements like <code>body</code> or <code>h1</code> globally.

You want to add a CSS reset or normalize styles across browsers.

You want to define fonts or colors once and use them everywhere.

Syntax

Svelte

<style global>
  /* CSS rules here apply globally */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
</style>

Use the global attribute on the <style> tag to make styles apply globally.

Without global, styles in Svelte components are scoped only to that component.

Examples

This sets the background color for the whole page.

Svelte

<style global>
  body {
    background-color: #f0f0f0;
  }
</style>

All <h1> headings in the app will be dark blue.

Svelte

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

This styles paragraphs only inside this component, not globally.

Svelte

<style>
  p {
    color: red;
  }
</style>

Sample Program

This example sets a light teal background and a font for the whole page. The heading color is also set globally. The styles apply everywhere, not just inside this component.

Svelte

<script>
  let name = 'Friend';
</script>

<style global>
  body {
    background-color: #e0f7fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 2rem;
  }

  h1 {
    color: #00796b;
  }
</style>

<h1>Hello, {name}!</h1>
<p>Welcome to your Svelte app with global styles.</p>

Important Notes

Global styles affect all components, so use them carefully to avoid unexpected changes.

For component-specific styles, omit the global attribute to keep styles scoped.

You can combine global styles with scoped styles in the same component by using multiple <style> tags.

Summary

Global styles apply CSS rules to the entire app or page.

Use <style global> in Svelte to write global CSS.

Global styles help keep your app's look consistent 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