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.