Global styles in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply global styles in a Svelte component.

Svelte

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

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

Alocal

Bscoped

Cmodule

Dglobal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scoped' or 'module' which limit styles to the component only.

Using global in the style tag applies styles globally in Svelte.

2fill in blank

medium

Complete the code to import a global CSS file in a Svelte component.

Svelte

<script>
  import '[1]';
</script>

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

A./Component.css

B./global.css

C./local.css

D./style.module.css

Attempts:

3 left

💡 Hint

Common Mistakes

Importing component-specific CSS files instead of global ones.

Importing ./global.css applies styles globally if the CSS file contains global styles.

3fill in blank

hard

Fix the error in the style tag to make styles global in Svelte.

Svelte

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

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

Aglobal

Bscoped

Cmodule

Dlocal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'module' or 'scoped' which keep styles local.

The global attribute makes styles apply globally instead of being scoped.

4fill in blank

hard

Fill both blanks to create a global style for all paragraphs with margin and font size.

Svelte

<style [1]>
  p {
    margin: [2];
    font-size: 1.2rem;
  }
</style>

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

Aglobal

B2rem

C1rem

Dscoped

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scoped' instead of 'global' for global styles.

Using invalid CSS units for margin.

Using global applies styles globally. Setting margin to 2rem adds space around paragraphs.

5fill in blank

hard

Fill all three blanks to define global styles with a background color, text color, and padding for the body.

Svelte

<style [1]>
  body {
    background-color: [2];
    color: [3];
    padding: 1rem;
  }
</style>

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

Ascoped

Bglobal

Cwhite

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scoped' which limits styles to the component.

Swapping background and text colors.

Use global to apply styles globally. The body background is white and text color is black for good contrast.