Global styles and CSS frameworks in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro apply global CSS styles?

In Astro, you want to apply a CSS file globally to all pages. Which method correctly applies global styles?

A Add a <link rel="stylesheet" href="/styles/global.css"> tag inside the <head> of the root layout file.

B Add the CSS file import inside a script tag in each component.

C Use inline styles on every HTML element in each component.

D Import the CSS file inside the <style> tag of each component.

💡 Hint

Think about where global styles should be linked so they affect the whole site.

Global CSS files should be linked once in the root layout's so all pages inherit the styles. Importing CSS inside components or using inline styles does not apply styles globally.

📝 Syntax

intermediate

Correct way to import Tailwind CSS in Astro

You want to use Tailwind CSS in your Astro project. Which code snippet correctly imports Tailwind's base styles globally?

A Use &lt;style&gt;@tailwind base;&lt;/style&gt; inside each component.

B Add &lt;script src="tailwind.css"&gt;&lt;/script&gt; in the root layout.

C Write &lt;link rel="stylesheet" href="tailwind.css"&gt; inside each component.

D @tailwind base; inside a global CSS file imported in the root layout.

💡 Hint

Tailwind uses special directives inside CSS files, not script tags or inline styles.

Tailwind CSS is imported via @tailwind directives inside a global CSS file, which is then linked globally. Script tags or inline styles do not load Tailwind properly.

🔧 Debug

advanced

Why are global styles not applying in Astro?

You added a global CSS file and linked it in your root layout, but styles are not showing on pages. What is the most likely cause?

A The CSS file path in the &lt;link&gt; tag is incorrect or missing leading slash.

B You forgot to add &lt;style global&gt; tag inside each component.

C Astro does not support global CSS files.

D You need to import the CSS file inside every component script.

💡 Hint

Check the URL path in your <link> tag carefully.

If the CSS file path is wrong or missing the leading slash, the browser cannot find the file, so styles won't apply. Astro supports global CSS via root layout linking.

🧠 Conceptual

advanced

How does Astro handle CSS frameworks with scoped styles?

Astro components have scoped styles by default. How does this affect using CSS frameworks like Bootstrap or Tailwind?

A You must import CSS frameworks inside each component's &lt;style scoped&gt; tag.

B Global CSS frameworks must be imported globally; scoped styles inside components do not affect them.

C You cannot use CSS frameworks with Astro because of scoped styles.

D Scoped styles override global CSS frameworks automatically without extra setup.

💡 Hint

Think about the difference between global and scoped CSS in Astro.

CSS frameworks like Bootstrap or Tailwind provide global styles. Astro's scoped styles inside components do not affect these global styles. Therefore, frameworks must be imported globally.

❓ state_output

expert

Result of conflicting global and scoped styles in Astro

Given a global CSS file setting body { background-color: white; } and a component scoped style setting body { background-color: black; }, what background color will the page body have when rendered?

A No background color, because conflicting styles cancel out.

B Black, because scoped styles inside components override global styles.

C White, because global styles have higher priority than scoped styles.

D Depends on the order of CSS imports in the root layout.

💡 Hint

Consider how scoped styles are applied in Astro and CSS specificity.

Scoped styles in Astro targeting the body do not apply because Astro adds unique attribute selectors (e.g., body[data-astro-xxx] {}), which do not match the actual body element. Therefore, only the global style applies, resulting in a white background.

Practice

1. What is the main purpose of global styles in an Astro project?

easy

A. To optimize images automatically

B. To add JavaScript functionality to components

C. To create isolated styles for a single component only

D. To apply CSS rules across the entire website for consistent design

Solution

1. Step 1: Understand what global styles do

   Global styles are CSS rules that apply to the whole website, ensuring a consistent look and feel.

2. Step 2: Compare options

   Only To apply CSS rules across the entire website for consistent design describes applying CSS site-wide. Options B, C, and D describe unrelated tasks.

3. Final Answer:

   To apply CSS rules across the entire website for consistent design -> Option D

4. Quick Check:

   Global styles = site-wide CSS [OK]

Hint: Global styles affect the whole site, not just parts [OK]

Common Mistakes:

• Confusing global styles with component-level styles
• Thinking global styles add JavaScript
• Believing global styles optimize images

2. Which is the correct way to import a global CSS file in an Astro project?

easy

A. @import './styles/global.css'; inside a JavaScript file

B. <link rel="stylesheet" href="./styles/global.css" /> inside src/pages/index.astro

C. import './styles/global.css'; inside a component script

D. require('./styles/global.css'); inside a component script

Solution

1. Step 1: Identify Astro's recommended import method

   Astro supports importing CSS files directly in component scripts using ES module syntax like import './styles/global.css';.

2. Step 2: Evaluate other options

   <link rel="stylesheet" href="./styles/global.css" /> inside src/pages/index.astro uses HTML link tag which can work but is less common in Astro root layouts. @import './styles/global.css'; inside a JavaScript file uses CSS syntax incorrectly in JS. require('./styles/global.css'); inside a component script uses CommonJS require which is not valid in Astro's ES module environment.

3. Final Answer:

   import './styles/global.css'; inside a component script -> Option C

4. Quick Check:

   Astro uses ES module imports for CSS [OK]

Hint: Use ES module import syntax for CSS in Astro [OK]

Common Mistakes:

• Using CommonJS require instead of import
• Trying to import CSS with @import in JS
• Placing <link> tags in wrong Astro files

3. Given this Astro root layout code snippet, what will be the background color of the page?

---
import '../styles/global.css';
---

  
    
  

And the global.css contains:

body { background-color: #f0f0f0; }

medium

A. White background

B. Light gray background (#f0f0f0)

C. No background color applied

D. Black background

Solution

1. Step 1: Understand global CSS import effect

   Importing global.css in the root layout applies its styles to the whole page, including the body tag.

2. Step 2: Check CSS rule

   The CSS sets body { background-color: #f0f0f0; }, which is a light gray color.

3. Final Answer:

   Light gray background (#f0f0f0) -> Option B

4. Quick Check:

   Imported global CSS sets body background [OK]

Hint: Global CSS in root layout affects body styles [OK]

Common Mistakes:

• Assuming default white background overrides global CSS
• Thinking CSS won't apply without inline styles
• Confusing slot content with styles

4. You tried importing Tailwind CSS in your Astro project by adding import 'tailwindcss/tailwind.css'; in a component, but styles don't apply. What is the likely issue?

medium

A. Tailwind CSS requires setup via PostCSS or Astro integration, not just import

B. You must import Tailwind CSS in every component separately

C. Tailwind CSS files must be renamed to .astro to work

D. Tailwind CSS only works with class components

Solution

1. Step 1: Understand Tailwind CSS integration in Astro

   Tailwind CSS needs build setup (like PostCSS or Astro Tailwind integration) to generate styles, not just importing CSS file.

2. Step 2: Evaluate other options

   You must import Tailwind CSS in every component separately is wrong because importing in every component is inefficient and unnecessary. Tailwind CSS files must be renamed to .astro to work is incorrect; CSS files don't become Astro files. Tailwind CSS only works with class components is false; Tailwind works with any component type.

3. Final Answer:

   Tailwind CSS requires setup via PostCSS or Astro integration, not just import -> Option A

4. Quick Check:

   Tailwind needs build setup, not just import [OK]

Hint: Tailwind needs build config, not just CSS import [OK]

Common Mistakes:

• Importing Tailwind CSS without build setup
• Thinking Tailwind works only in certain components
• Renaming CSS files incorrectly

5. You want to use Bootstrap CSS framework globally in your Astro site. Which is the best way to do this?

hard

A. Add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> in your root layout's <head>

B. Import Bootstrap CSS in every component separately

C. Copy Bootstrap CSS into each component's style tag

D. Use Bootstrap JavaScript files only without CSS

Solution

1. Step 1: Understand global CSS inclusion for frameworks

   Including Bootstrap CSS globally via a CDN link in the root layout's <head> ensures all pages get the styles.

2. Step 2: Evaluate other options

   Import Bootstrap CSS in every component separately is inefficient and redundant. Copy Bootstrap CSS into each component's style tag is impractical and breaks DRY principle. Use Bootstrap JavaScript files only without CSS misses CSS, so no styles apply.

3. Final Answer:

   Add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> in your root layout's <head> -> Option A

4. Quick Check:

   Global CSS frameworks via CDN link in root layout [OK]

Hint: Use CDN link in root layout head for global CSS frameworks [OK]

Common Mistakes:

• Importing CSS in every component instead of once globally
• Copy-pasting CSS into components
• Ignoring CSS and using only JS files