Global styles in Svelte - Mini Project: Build & Apply

Global styles in Svelte

📖 Scenario: You are building a simple webpage using Svelte. You want to apply some styles that affect the entire page, like setting the background color and font for all text.

🎯 Goal: Create global CSS styles in a Svelte project that set the background color to light gray and the font family to Arial for the whole page.

📋 What You'll Learn

Create a Svelte component with a <style> block

Use the :global selector to apply styles globally

Set the body background color to #f0f0f0

Set the body font family to Arial, sans-serif

Add a simple <h1> heading to see the styles applied

💡 Why This Matters

🌍 Real World

Global styles let you set consistent look and feel for your whole website or app, like fonts and background colors.

💼 Career

Knowing how to apply global styles in Svelte is important for frontend developers to maintain consistent design across components.

1

Create the Svelte component structure

Create a Svelte component with an <h1> heading that says Welcome to Global Styles.

Svelte

Welcome to Global Styles

Hint

Just write the heading inside the component's markup.

2

Add a style block for global styles

Add a <style> block below the heading. Inside it, start a global style block using :global(body).

Svelte

Welcome to Global Styles


  /* Start global styles here */
  :global(body) {
    /* Your code here */
  }

Hint

Use :global(body) to write styles that affect the body element globally.

3

Set the body background color globally

Inside the :global(body) block, set the background-color to #f0f0f0.

Svelte

Welcome to Global Styles


  :global(body) {
    /* Set body background color here */
  }

Hint

Write background-color: #f0f0f0; inside :global(body) {}.

4

Add global font family to body

Inside the :global(body) block, add a font-family property with the value Arial, sans-serif.

Svelte

Welcome to Global Styles


  :global(body) {
    background-color: #f0f0f0;
    /* Add font-family here */
  }

Hint

Add font-family: Arial, sans-serif; inside the :global(body) block.

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