Recall & Review
beginner
What does 'scoped styles' mean in Astro components?
Scoped styles mean CSS rules that apply only to the component they are written in, preventing them from affecting other parts of the page.
Click to reveal answer
beginner
How do you add scoped styles inside an Astro component?
You add a <style> tag with the 'scoped' attribute inside the component file. This ensures styles apply only to that component.
Click to reveal answer
intermediate
Why are scoped styles helpful in component-based frameworks like Astro?
They keep styles isolated, so changes in one component's CSS don't accidentally change others. This makes maintenance easier and avoids style conflicts.
Click to reveal answer
intermediate
Can scoped styles in Astro components use global CSS selectors?
No, scoped styles only apply inside the component. To style globally, you use a separate global CSS file or the :global() selector inside scoped styles.
Click to reveal answer
beginner
What happens if you omit the 'scoped' attribute in the <style> tag inside an Astro component?
The styles become global and can affect other components or elements outside the current component.
Click to reveal answer
In Astro, how do you ensure styles only apply to one component?
✗ Incorrect
Adding 'scoped' to the