Scoped styles in components in Astro

Introduction

Scoped styles keep CSS rules inside a component only. This stops styles from changing other parts of your page by mistake.

When you want to style a button inside a component without affecting buttons elsewhere.

When building reusable components that need their own look.

When you want to avoid CSS conflicts in a big project with many components.

When you want to keep your styles organized and easy to maintain.

Syntax

Astro

<style lang="css" scoped>
  /* CSS rules here */
</style>

Use the scoped attribute on the <style> tag to limit styles to the component.

Scoped styles apply only to elements inside the same component file.

Examples

This styles all <p> tags inside this component with blue text only.

Astro

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

You can use preprocessors like SCSS with scoped styles by adding lang="scss".

Astro

<style lang="scss" scoped>
  .card {
    border: 1px solid black;
  }
</style>

Sample Program

This component shows a green button with white text. The styles only affect this button inside the component.

Astro

---
// No frontmatter needed for this example
---

<style scoped>
  button {
    background-color: green;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
  }
</style>

<button>Click me</button>

Important Notes

Scoped styles in Astro work by adding unique attributes behind the scenes to keep styles local.

Remember that global styles still apply unless overridden by scoped styles.

Summary

Scoped styles keep CSS inside a component only.

Use scoped attribute on the <style> tag.

This helps avoid style conflicts and keeps your project tidy.

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