Scoped styles in components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply scoped styles inside an Astro component.

Astro

<style [1]>
  p {
    color: blue;
  }
</style>
<p>Hello, Astro!</p>

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

Amodule

Bglobal

Cscoped

Dlocal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'global' applies styles everywhere, not scoped.

Using 'module' or 'local' are not valid Astro style attributes.

Using scoped inside the <style> tag applies styles only to this component.

2fill in blank

medium

Complete the code to import a CSS module and use it in an Astro component.

Astro

---
import styles from './Button.module.css';
---
<button class=[1]>Click me</button>

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

Astyles['button']

Bstyles.button

Cstyles.button()

Dstyles->button

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses like a function call.

Using invalid syntax like arrows or brackets incorrectly.

Use styles.button to apply the CSS module class named 'button'.

3fill in blank

hard

Fix the error in the scoped style syntax to correctly apply styles only to this component.

Astro

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

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

Ascoped=true

Bscrope

Cscope

Dscoped

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the attribute as 'scrope' or 'scope'.

Adding '=true' which is not needed.

The correct attribute is scoped without any value to scope styles.

4fill in blank

hard

Fill both blanks to create a CSS module and apply it to a div in Astro.

Astro

---
import styles from './Card.module.css';
---
<div class=[1]>
  Content
</div>
<style [2]>
  div {
    padding: 1rem;
  }
</style>

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

Astyles.card

Bscoped

Cglobal

Dstyles.container

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'global' instead of 'scoped' for style attribute.

Using wrong style class names.

Use styles.card to apply the CSS module class and scoped to limit styles inside the component.

5fill in blank

hard

Fill all three blanks to create a scoped style, import a CSS module, and apply a class in Astro.

Astro

---
import styles from './Alert.module.css';
---
<section class=[1]>
  Warning message
</section>
<style [2]>
  section {
    border: 1px solid red;
  }
</style>
<script>
  console.log('[3]');
</script>

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

Astyles.alert

Bscoped

CAlert loaded

Dglobal

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting quotes around the logged string.

Using wrong class names.

Use styles.alert for the class, scoped to limit styles, and log a message 'Alert loaded' in the script.

Practice

1. What is the main purpose of using scoped styles in Astro components?

easy

A. To apply styles globally across all components

B. To keep CSS styles limited to the component only, avoiding conflicts

C. To load styles from an external CSS file

D. To disable CSS styles in the component

Solution

1. Step 1: Understand scoped styles concept

   Scoped styles restrict CSS rules to the component they are defined in, preventing them from affecting other parts of the app.

2. Step 2: Compare with global styles

   Global styles apply everywhere, but scoped styles keep styles local and avoid conflicts.

3. Final Answer:

   To keep CSS styles limited to the component only, avoiding conflicts -> Option B

4. Quick Check:

   Scoped styles = local CSS only [OK]

Hint: Scoped means styles stay inside the component only [OK]

Common Mistakes:

• Thinking scoped styles apply globally
• Confusing scoped with external CSS
• Believing scoped disables styles

2. Which is the correct way to write scoped styles inside an Astro component?

easy

A. h1 { color: red; }

B.

C.

D.

Solution

1. Step 1: Recall scoped style syntax in Astro

   Scoped styles use the scoped attribute inside the <style> tag.

2. Step 2: Check each option's syntax

   correctly uses <style scoped>. Others misuse tags or attributes.

3. Final Answer:

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

4. Quick Check:

   Use <style scoped> for scoped CSS [OK]

Hint: Add scoped attribute inside <style> tag [OK]

Common Mistakes:

• Putting scoped outside <style> tag
• Using
• Writing scoped as a CSS selector

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

<style scoped>
h1 { color: blue; }
</style>

<h1>Hello World</h1>

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

medium

A. Red

B. Black (default)

C. Blue

D. Both blue and red, mixed

Solution

1. Step 1: Identify scoped vs global styles

   The first style block is scoped, so it applies only to this component's h1 and sets color blue.

2. Step 2: Understand global style effect

   The second style block is global and sets h1 color red, but scoped styles override global styles inside the component.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Scoped styles override global inside component [OK]

Hint: Scoped styles override global styles inside component [OK]

Common Mistakes:

• Thinking global styles override scoped
• Assuming colors mix or combine
• Ignoring scoped attribute effect

4. You wrote this scoped style in an Astro component but it does not apply:

<style> scoped
p { font-weight: bold; }
</style>

What is the error?

medium

A. The scoped attribute must be inside the <style> tag, not as text

B. The CSS selector p is invalid

C. Scoped styles cannot style p tags

D. You must import the CSS file separately

Solution

1. Step 1: Check how scoped attribute is used

   The code places "scoped" as text inside the style block, which is invalid.

2. Step 2: Correct usage of scoped attribute

   Scoped must be an attribute on the <style> tag: <style scoped>, not inside the CSS.

3. Final Answer:

   The scoped attribute must be inside the <style> tag, not as text -> Option A

4. Quick Check:

   Scoped is an attribute, not CSS text [OK]

Hint: Put scoped inside <style> tag, not inside CSS code [OK]

Common Mistakes:

• Writing scoped as CSS text
• Thinking scoped styles can't style paragraphs
• Forgetting to add scoped attribute

5. You want to style a button inside an Astro component so it looks different only in this component, but also keep a global style for all buttons elsewhere. How should you write your styles?

hard

A. Use <style scoped> for the button styles inside the component and global styles outside

B. Write all button styles inside a global <style> tag

C. Use inline styles on the button element instead of CSS

D. Use <style global> inside the component for button styles

Solution

1. Step 1: Understand scoped vs global style roles

   Scoped styles apply only inside the component, so use <style scoped> for component-specific button styles.

2. Step 2: Keep global styles separate

   Global styles for buttons elsewhere remain in global CSS or <style> without scoped attribute.

3. Final Answer:

   Use <style scoped> for the button styles inside the component and global styles outside -> Option A

4. Quick Check:

   Scoped styles isolate component CSS [OK]

Hint: Scoped styles for component-only, global styles for shared CSS [OK]

Common Mistakes:

• Putting all styles global and causing conflicts
• Using inline styles unnecessarily
• Misusing