Global styles and CSS frameworks in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Astro

<style global>[1] './styles/global.css';</style>

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

Ainclude

Bimport

Crequire

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'import' instead of '@import' inside CSS style tags.

Trying to use JavaScript import syntax inside CSS.

In Astro, to apply global CSS styles, you use the @import rule inside a <style global> tag.

2fill in blank

medium

Complete the code to add Tailwind CSS as a global style in an Astro project.

Astro

<style global>[1] './styles/tailwind.css';</style>

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

A@import

Bimport

Crequire

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript import syntax instead of CSS @import.

Trying to import Tailwind CSS in a component style tag without 'global'.

Tailwind CSS is added globally by importing its CSS file using @import inside a <style global> tag.

3fill in blank

hard

Fix the error in this Astro component to apply global styles correctly.

Astro

<style global>[1] './styles/global.css';</style>

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

Aimport

Brequire

C@import

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using <style> without 'global' for global CSS.

Using JavaScript import syntax inside CSS.

In Astro, to apply global CSS styles, you use the @import rule inside a <style global> tag.

4fill in blank

hard

Fill both blanks to correctly include Bootstrap CSS globally in an Astro project.

Astro

<style global>[1] '[2]';</style>

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

A@import

Bbootstrap/dist/css/bootstrap.min.css

Cstyles/bootstrap.css

Dimport

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript import syntax inside CSS.

Using a local path instead of the Bootstrap package path.

Bootstrap CSS is added globally by using @import with the correct path to the Bootstrap CSS file inside a <style global> tag.

5fill in blank

hard

Fill all three blanks to create a global style import with a media query in Astro.

Astro

<style global>
  [1] '[2]' [3];
</style>

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

A@import

Bstyles/dark-mode.css

Cscreen and (prefers-color-scheme: dark)

Dimport

Attempts:

3 left

💡 Hint

Common Mistakes

Using JavaScript import syntax inside CSS.

Forgetting the media query after the import path.

This code imports a CSS file globally only when the user's device prefers dark mode, using a media query with @import.

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