Global styles in Svelte - Mini Project: Build & Apply

Global styles in Svelte

📖 Scenario: You are building a simple webpage using Svelte. You want to apply some styles that affect the entire page, like setting the background color and font for all text.

🎯 Goal: Create global CSS styles in a Svelte project that set the background color to light gray and the font family to Arial for the whole page.

📋 What You'll Learn

Create a Svelte component with a <style> block

Use the :global selector to apply styles globally

Set the body background color to #f0f0f0

Set the body font family to Arial, sans-serif

Add a simple <h1> heading to see the styles applied

💡 Why This Matters

🌍 Real World

Global styles let you set consistent look and feel for your whole website or app, like fonts and background colors.

💼 Career

Knowing how to apply global styles in Svelte is important for frontend developers to maintain consistent design across components.

1

Create the Svelte component structure

Create a Svelte component with an <h1> heading that says Welcome to Global Styles.

Svelte

Welcome to Global Styles

Need a hint?

Just write the heading inside the component's markup.

2

Add a style block for global styles

Add a <style> block below the heading. Inside it, start a global style block using :global(body).

Svelte

Welcome to Global Styles


  /* Start global styles here */
  :global(body) {
    /* Your code here */
  }

Need a hint?

Use :global(body) to write styles that affect the body element globally.

3

Set the body background color globally

Inside the :global(body) block, set the background-color to #f0f0f0.

Svelte

Welcome to Global Styles


  :global(body) {
    /* Set body background color here */
  }

Need a hint?

Write background-color: #f0f0f0; inside :global(body) {}.

4

Add global font family to body

Inside the :global(body) block, add a font-family property with the value Arial, sans-serif.

Svelte

Welcome to Global Styles


  :global(body) {
    background-color: #f0f0f0;
    /* Add font-family here */
  }

Need a hint?

Add font-family: Arial, sans-serif; inside the :global(body) block.