Global vs scoped style strategies in Svelte - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a scoped style to the paragraph.

Svelte

<style>
p [1] {
  color: blue;
}
</style>

<p>This text should be blue only inside this component.</p>

Drag options to blanks, or click blank then click option'

Ap

B:global(p)

C:local(p)

D:scoped(p)

Attempts:

3 left

💡 Hint

Common Mistakes

Using :global() when you want scoped styles

Trying to add :scoped() which is not a valid Svelte selector

In Svelte, styles inside the <style> tag are scoped by default. So just using p applies styles only to this component.

2fill in blank

medium

Complete the code to apply a global style to all paragraphs.

Svelte

<style>
[1] {
  font-weight: bold;
}
</style>

<p>This text should be bold everywhere.</p>

Drag options to blanks, or click blank then click option'

Ap

B:scoped(p)

C:local(p)

D:global(p)

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'p' which scopes styles locally

Using :local() which is not needed for global styles

Using :global(p) applies the style to all <p> elements globally, not just inside this component.

3fill in blank

hard

Fix the error in the style to make the button color red globally.

Svelte

<style>
button [1] {
  color: red;
}
</style>

<button>Click me</button>

Drag options to blanks, or click blank then click option'

A:local()

B:scoped()

C:global()

D:scope()

Attempts:

3 left

💡 Hint

Common Mistakes

Using :local() which scopes styles locally

Using :scoped() which is not a valid Svelte selector

To make the button style global, wrap the selector with :global(). Other options are invalid or scope styles locally.

4fill in blank

hard

Complete the code to create a global style for links and a scoped style for headings.

Svelte

<style>
a[1] {
  text-decoration: none;
}
h1 {
  color: green;
}
</style>

Drag options to blanks, or click blank then click option'

A:global()

B:local()

D:scoped()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding :local() unnecessarily for scoped styles

Using :scoped() which is invalid

Use :global() for the link style to apply globally. For the heading, no special selector is needed because styles are scoped by default.

5fill in blank

hard

Fill both blanks to style a global class, a scoped id, and a global element.

Svelte

<style>
.[1] {
  background: yellow;
}
#[2] {
  border: 1px solid black;
}
button {
  padding: 0.5rem;
}
</style>

Drag options to blanks, or click blank then click option'

Ahighlight

B:global()

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dot before class name

Using :scoped() which is invalid

Putting :global() on the class selector instead of the id

The class highlight is styled globally by default with the dot. The id uses :global() to apply globally. The empty string means no extra selector for the id, so it is scoped by default.