Scoped styles by default in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a scoped style that makes the paragraph text red.

Svelte

<script>
  // No script needed here
</script>

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

<p>This text should be red.</p>

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

Ablack

Bblue

Cgreen

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than red will not produce the expected red text.

Trying to add global styles instead of scoped styles.

The style color red makes the paragraph text red. In Svelte, styles are scoped by default, so this style applies only to this component.

2fill in blank

medium

Complete the code to add a scoped style that makes the heading text blue.

Svelte

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

<h1>Blue heading</h1>

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

Ablue

Bred

Cyellow

Dgray

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color that does not match the heading text color.

Forgetting that styles are scoped by default in Svelte.

The color blue makes the heading text blue. Svelte automatically scopes styles to this component, so only this heading is affected.

3fill in blank

hard

Fix the error in the scoped style to make the button background green.

Svelte

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

<button>Click me</button>

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that does not match the requirement.

Trying to apply styles globally instead of scoped.

The background color green will make the button's background green. Svelte scopes this style to the button in this component only.

4fill in blank

hard

Fill both blanks to style the div with a red border and padding of 1rem.

Svelte

<style>
  div {
    border: [1];
    padding: [2];
  }
</style>

<div>Styled box</div>

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

A1px solid red

B2rem

C1rem

D3px dashed blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect border syntax.

Using padding values that are too large or small.

The border 1px solid red creates a thin red border. The padding 1rem adds space inside the box. Both styles are scoped to this div only.

5fill in blank

hard

Fill all three blanks to create a scoped style that makes the heading text green, the paragraph text gray, and adds margin of 2rem to the section.

Svelte

<style>
  h2 { color: [1]; }
  p { color: [2]; }
  section { margin: [3]; }
</style>

<section>
  <h2>Green heading</h2>
  <p>Gray paragraph</p>
</section>

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

Agreen

Bgray

C2rem

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up colors for heading and paragraph.

Using incorrect units for margin.

The heading color green and paragraph color gray style the texts accordingly. The section margin 2rem adds space around the section. All styles are scoped to this component.

Practice

1. What does it mean that styles in Svelte are scoped by default?

easy

A. Styles inside a component only affect that component's elements.

B. Styles apply globally to all components automatically.

C. You must manually scope styles using special selectors.

D. Styles are disabled unless scoped explicitly.

Solution

1. Step 1: Understand Svelte's style behavior

   Svelte automatically scopes styles so they only apply inside the component where they are written.

2. Step 2: Compare options with this behavior

   Only Styles inside a component only affect that component's elements. correctly states that styles affect only the component's elements, not globally or requiring manual scoping.

3. Final Answer:

   Styles inside a component only affect that component's elements. -> Option A

4. Quick Check:

   Scoped styles = local effect [OK]

Hint: Remember: Svelte styles stay local unless global keyword used [OK]

Common Mistakes:

• Thinking styles apply globally by default
• Believing manual scoping is needed
• Confusing scoped with disabled styles

2. Which of the following is the correct way to write scoped styles in a Svelte component?

easy

A.

B. p { color: red; }

C.

D.

Solution

1. Step 1: Identify correct tag for styles in Svelte

   Svelte uses the standard <style> tag for component styles, which are scoped by default.

2. Step 2: Check options for correct syntax

   <style> p { color: red; } </style> uses <style> with CSS inside, which is correct. <style global> p { color: red; } </style> uses <style global> which disables scoping. <css> p { color: red; } </css> uses invalid <css> tag. <style scoped> p { color: red; } </style> uses <style scoped> which is not valid in Svelte.

3. Final Answer:

   <style> p { color: red; } </style> -> Option D

4. Quick Check:

   Use <style> for scoped CSS [OK]

Hint: Use plain <style> tag for scoped styles in Svelte [OK]

Common Mistakes:

• Using
• Confusing
• Using non-standard tags like <css>

3. Given this Svelte component code, what color will the paragraph text be?

<script>
  let color = 'blue';
</script>

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

<p>Hello</p>

medium

A. Black (default)

B. Blue

C. Red

D. No color applied (transparent)

Solution

1. Step 1: Check the CSS style inside the component

   The style tag sets paragraph text color to red.

2. Step 2: Check if any inline or script color overrides exist

   The script variable 'color' is not used in the style or markup, so it does not affect the paragraph color.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   CSS inside <style> applies locally [OK]

Hint: CSS in <style> overrides default color unless overridden inline [OK]

Common Mistakes:

• Assuming script variable changes style automatically
• Thinking default black applies over CSS
• Confusing variable with CSS property

4. You wrote this Svelte component but the styles are affecting other components too. What is the likely problem?

<style global>
  h1 { font-size: 3rem; }
</style>

medium

A. Missing a closing tag for <style> causes global effect.

B. Using

C. Svelte does not support scoped styles by default.

D. The CSS selector h1 is invalid inside Svelte.

Solution

1. Step 1: Understand the effect of <style global>

   Using <style global> disables scoping and applies styles globally across all components.

2. Step 2: Identify why styles affect other components

   The global tag causes the h1 style to leak outside the component, affecting all h1 elements.

3. Final Answer:

   Using <style global> makes styles apply globally, not scoped. -> Option B

4. Quick Check:

   <style global> disables scoping [OK]

Hint: Avoid

Common Mistakes:

• Thinking missing tags cause global styles
• Believing Svelte disables scoped styles by default
• Assuming CSS selectors are invalid in Svelte

5. You want to style a button inside a Svelte component but also allow a global style to override it if needed. How can you write the styles to achieve this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand how to combine scoped and global styles

   Svelte styles are scoped by default, but you can use :global() selector inside scoped styles to apply global CSS rules.

2. Step 2: Analyze options for correct usage

   <style> :global(button) { background: green; } </style> uses :global(button) inside scoped style, allowing global styles to override or apply to button elements. <style> button { background: green; } </style> scopes styles only locally. <style global> button { background: green; } </style> applies styles globally but does not allow local override. <style scoped> button { background: green; } </style> uses invalid <style scoped> tag.

3. Final Answer:

   <style> :global(button) { background: green; } </style> -> Option A

4. Quick Check:

   Use :global() inside <style> for global selectors [OK]

Hint: Use :global() inside <style> to mix scoped and global styles [OK]

Common Mistakes:

• Using
• Applying global styles without :global() inside scoped style
• Not knowing :global() allows global CSS inside scoped styles