Global styles in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does global style affect nested components in Svelte?

Consider a Svelte app with a global style defined in app.css and imported in App.svelte. How will the global style affect nested components?

Svelte

/* app.css */
body {
  background-color: lightblue;
}

/* App.svelte */
<script>
  import './app.css';
  import Child from './Child.svelte';
</script>
<main>
  <Child />
</main>

A The global style applies to all nested components, changing the background color of the entire app.

B The global style only applies to <code>App.svelte</code> and does not affect nested components.

C The global style applies only if nested components explicitly import the CSS file again.

D Global styles are ignored in Svelte; styles must be scoped inside each component.

💡 Hint

Think about how CSS works in the browser and how Svelte handles style imports.

Global CSS files imported in a root component apply styles globally to the entire app, including nested components, because CSS cascades through the DOM.

📝 Syntax

intermediate

Which syntax correctly defines a global style in a Svelte component?

In Svelte, how do you write a style block that applies styles globally instead of scoping them to the component?

Svelte

<script>
  // No script needed
</script>
<style>
  /* Your style here */
</style>

A <style scoped>h1 { color: red; }</style>

B <style lang="global">h1 { color: red; }</style>

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

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

💡 Hint

Remember the special attribute Svelte uses to mark global styles inside a component.

In Svelte, adding the global attribute to the <style> tag makes the styles global instead of scoped.

🔧 Debug

advanced

Why does this global style not apply to the button?

Given the following Svelte component, why does the button not get the red background as expected?

Svelte

<style>
  button {
    background-color: red;
  }
</style>
<button>Click me</button>

A The style is scoped and does not apply globally, but since the button is inside the component, it should apply.

B The button is a native HTML element and cannot be styled inside Svelte components.

C The style block is missing the <code>global</code> attribute, so the style is scoped and applies only to this component's button.

D The style block must be placed inside a <code>&lt;style global&gt;</code> tag to apply to the button.

💡 Hint

Think about how Svelte scopes styles and how that affects native elements inside the component.

The style is scoped to the component, so it applies to the button inside it. The button is styled red as expected. The question is tricky because the style is not global but still applies locally.

❓ state_output

advanced

What is the background color after toggling the global style in Svelte?

In a Svelte app, a global style toggles a class on the body element. What background color will the page have after toggling?

Svelte

<script>
  let darkMode = false;
  function toggle() {
    darkMode = !darkMode;
    if (darkMode) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }
</script>
<button on:click={toggle}>Toggle Dark Mode</button>
<style global>
  body { background-color: white; }
  body.dark { background-color: black; }
</style>

A The background color does not change because the <code>dark</code> class is not defined globally.

B The background color switches between white and black each time the button is clicked.

C The background color changes to black once and never switches back.

D The background color stays white because Svelte does not allow modifying <code>body</code> classes.

💡 Hint

Consider how global styles and DOM class manipulation work together.

The global style defines background colors for body and body.dark. Toggling the dark class on body switches the background color accordingly.

🧠 Conceptual

expert

Why use :global() selector inside scoped styles in Svelte?

What is the purpose of using the :global() CSS selector inside a scoped style block in Svelte?

Svelte

<style>
  :global(h1) {
    color: green;
  }
  p {
    color: blue;
  }
</style>

A It applies the style only to <code>h1</code> elements inside this component, but globally to all <code>p</code> elements.

B It scopes the <code>h1</code> style only to this component, preventing global leakage.

C It causes a syntax error because <code>:global()</code> cannot be used inside scoped styles.

D It applies the style to all <code>h1</code> elements globally, ignoring Svelte's style scoping, while <code>p</code> remains scoped.

💡 Hint

Think about how :global() overrides Svelte's default style scoping.

The :global() selector tells Svelte to apply the style globally, ignoring the component's scoped style rules. Other styles remain scoped.

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