Why Astro handles styles efficiently - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a CSS file in an Astro component.

Astro

---
import '[1]';
---

<div>Hello Astro!</div>

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

A./styles.css

Bapp.jsx

Cindex.html

Dstyles.js

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import JavaScript or HTML files as styles.

Forgetting to include the file extension.

Astro imports CSS files directly using the import statement with the CSS file path.

2fill in blank

medium

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

Astro

<style [1]>
  p { color: blue; }
</style>

<p>This text is blue and scoped.</p>

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

Alocal

Bglobal

Cmodule

Dscoped

Attempts:

3 left

💡 Hint

Common Mistakes

Using global which applies styles globally.

Using unsupported attributes like module or local.

Using scoped attribute in Astro's <style> tag scopes styles to the component only.

3fill in blank

hard

Identify the CSS import that causes unused CSS to load unnecessarily.

Astro

---
import '[1]';
---

<div>Content without styles</div>

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

A./styles.css

B./reset.css

C./unused.css

D./theme.css

Attempts:

3 left

💡 Hint

Common Mistakes

Importing all CSS files regardless of usage.

Not removing unused CSS imports.

Astro includes all imported CSS by default, even if unused. Importing ./unused.css causes unnecessary loading since the component has no matching elements.

4fill in blank

hard

Fill both blanks to create a style block that applies globally and one scoped style.

Astro

<style [1]>
  body { margin: 0; }
</style>

<style [2]>
  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 scoped styles for global rules.

Using global styles for component-specific rules.

The first style block uses global to apply styles to the whole page. The second uses scoped to limit styles to the component.

5fill in blank

hard

Fill all three blanks to create a style object with dynamic class names and conditional styles in Astro.

Astro

---
const isActive = true;
const styles = {
  button: '[1]',
  active: isActive ? '[2]' : '',
  disabled: '[3]'
};
---

<button class="{styles.button} {styles.active} {styles.disabled}">Click me</button>

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

Abtn

Bbtn-active

Cbtn-disabled

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that don't match CSS.

Not using conditional logic for active state.

Class names are assigned dynamically. button uses btn, active uses btn-active if active, and disabled uses btn-disabled.