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.