Global styles and CSS frameworks in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are global styles in a web project?

Global styles are CSS rules that apply to the entire website or app, affecting all pages and components unless overridden by more specific styles.

beginner

Why use a CSS framework like Tailwind or Bootstrap?

CSS frameworks provide ready-made styles and components, helping developers build consistent and responsive designs faster without writing all CSS from scratch.

intermediate

How do you include global styles in an Astro project?

You can add a global CSS file in the 'src/styles' folder and import it in the root layout or main entry file to apply styles across all pages.

intermediate

What is the difference between utility-first CSS frameworks and component-based CSS frameworks?

Utility-first frameworks like Tailwind provide small reusable classes for styling, while component-based frameworks like Bootstrap offer pre-designed UI components with styles.

advanced

How can global styles affect accessibility and responsiveness?

Global styles set base font sizes, colors, and layouts that impact readability and usability on all devices, so they must ensure good color contrast and flexible layouts for accessibility and responsiveness.

In Astro, where is the best place to import global CSS styles?

A In the root layout or main entry file

B Inside each component separately

C Only in the index page

D In the public folder

Importing global CSS in the root layout or main entry file ensures styles apply across all pages and components.

Which CSS framework style approach uses many small classes for styling elements?

A Component-based frameworks

B CSS-in-JS

C Utility-first frameworks

D Preprocessor frameworks

Utility-first frameworks like Tailwind use many small classes to style elements directly.

What is a key benefit of using a CSS framework?

A It slows down development

B Provides ready-made styles and components

C You write all CSS from scratch

D Removes the need for HTML

CSS frameworks provide ready-made styles and components to speed up development.

Global styles should ensure which of the following for accessibility?

A Good color contrast and readable fonts

B Fixed font sizes only

C Low color contrast

D Only dark mode support

Good color contrast and readable fonts help make content accessible to all users.

Which folder is commonly used to store global CSS files in an Astro project?

A src/components

B src/pages

C public/assets

D src/styles

The 'src/styles' folder is commonly used to organize global CSS files.

Explain how global styles work in an Astro project and why they are important.

Think about where you place CSS files and how they affect the whole site.

Describe the differences between utility-first and component-based CSS frameworks and when you might choose each.

Consider how you want to build your UI: from small pieces or from full components.

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