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.

Practice

1. In Svelte, which tag is used to write CSS that applies globally across the entire app?

easy

A.

B.

C.

D.

Solution

1. Step 1: Understand Svelte style scoping

   By default, styles in Svelte components are scoped locally to that component.

2. Step 2: Identify global style syntax

   To apply styles globally, Svelte uses the

Hint: Global styles use

Common Mistakes:

• Using
• Trying to use which is not a Svelte tag
• Assuming

2. Which of the following is the correct syntax to write global CSS in a Svelte component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize global style syntax options

   Svelte allows global styles either by uses

Hint: Use

Common Mistakes:

• Using
• Writing global styles without :global or
• Assuming plain <style> applies globally

3. Given this Svelte component code, what color will the <h1> text be when rendered?

<style global>
h1 { color: red; }
</style>

<h1>Hello</h1>

medium

A. Red

B. Black (default)

C. Blue

D. No color applied

Solution

1. Step 1: Analyze the global style

   The <style global> block sets all <h1> elements to color red globally.

2. Step 2: Check the <h1> element

   The <h1> text 'Hello' matches the global style and will appear red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   Global h1 color = red [OK]

Hint: Global styles affect all matching elements [OK]

Common Mistakes:

• Thinking styles are scoped locally by default
• Ignoring the
• Assuming default black color remains

4. Identify the error in this Svelte component's CSS if the intention is to apply global styles:

<style>
:global(body) {
  background: #eee;
}
</style>

medium

A. Missing

B. No error, code is correct

C. CSS property 'background' is invalid

D. Incorrect use of :global selector syntax

Solution

1. Step 1: Understand :global selector usage

   The :global() selector inside a normal <style> tag applies styles globally to the selector inside parentheses.

2. Step 2: Verify CSS correctness

   The CSS property 'background' with value '#eee' is valid and applies a light gray background.

3. Final Answer:

   No error, code is correct -> Option B

4. Quick Check:

   :global() selector works inside <style> [OK]

Hint: Use :global(selector) inside <style> for global CSS [OK]

Common Mistakes:

• Thinking
• Misunderstanding :global() syntax
• Assuming CSS property is wrong

5. You want to apply a global font style to your entire Svelte app but also have a component with a local style that overrides the font color. Which approach correctly achieves this?

hard

A. Use only normal <style> for all styles, no global styles

B. Use only

C. Use

D. Use

Solution

1. Step 1: Apply global font-family

   Use <style global> to set font-family globally so all components inherit it.

2. Step 2: Override font color locally

   Use normal <style> in the component to set font color locally, which overrides global styles.

3. Final Answer:

   Use <style global> for font-family and normal <style> for local font color override -> Option C

4. Quick Check:

   Global styles + local overrides = Use

Hint: Global styles for base, local styles for overrides [OK]

Common Mistakes:

• Trying to override global styles inside
• Using
• Not separating global and local styles properly