Welcome to the first lesson of the Styling & Transitions in Svelte course! In this lesson, we’ll dive into the fundamentals of styling in Svelte, focusing on three key concepts: scoped styles, component styles, and global styles. Understanding these concepts is essential for creating clean, maintainable, and visually appealing user interfaces.

Svelte makes styling straightforward by allowing you to write CSS directly within your components. This approach ensures that styles are modular and scoped to the component by default, preventing unintended conflicts across your application. However, Svelte also provides flexibility for defining global styles when needed, ensuring you have the tools to handle any styling scenario.

By the end of this lesson, you’ll understand how to use scoped, component, and global styles effectively in Svelte. You’ll also see how these concepts work together in a practical example, preparing you for the practice exercises that follow.

Note: This lesson assumes you have a basic understanding of CSS. If you're new to CSS or need a refresher, we recommend taking one of our CSS Paths before proceeding. Additionally, we will specifically highlight what is unique to Svelte versus standard CSS.

Scoped styles are the default way to style components in Svelte. When you write CSS inside a <style> block in a Svelte component, those styles are automatically scoped to that component. This means they won’t affect other components or elements outside of the current component.

Here’s an example of scoped styles in action:

svelte
Copy to clipboard
1<!-- Scoped styles (default) -->
2<style>
3  h1 {
4    color: blue;
5  }
6</style>
7
8<h1>Hello, Svelte!</h1>

In this example, the h1 element will be styled with a blue color, but only within this component. If you have another component with an h1 element, it won’t be affected by this style. This scoping mechanism helps avoid CSS conflicts and makes your styles more predictable.

Component styles allow you to define styles that are specific to a component while also enabling customization through CSS variables. This is particularly useful when you want to create reusable components that can be styled dynamically.

Let’s look at an example using CSS variables:

svelte
Copy to clipboard
1<script>
2  import Box from '$lib/Box.svelte';
3</script>
4
5<div class="boxes">
6  <Box --color="red" />
7  <Box --color="green" />
8  <Box --color="blue" />
9</div>

In this example, the Box component uses a CSS variable (--color) to set its background color. Here’s how the Box.svelte component is defined:

svelte
Copy to clipboard
1<div class="box"></div>
2
3<style>
4  .box {
5    width: 5em;
6    height: 5em;
7    border-radius: 0.5em;
8    margin: 0 0 1em 0;
9    background-color: var(--color, #ddd);
10  }
11</style>

The background-color property in the .box class uses the CSS var() function to apply the --color variable. If no value is provided for --color, it defaults to #ddd. This approach makes the Box component highly customizable and reusable.

While scoped styles are great for component-specific styling, there are times when you need to apply styles globally. Svelte provides the :global() selector for this purpose. Styles wrapped in :global() are not scoped to the component and will apply to the entire document.

Here’s an example of using :global() to set a background color for the body element:

svelte
Copy to clipboard
1<!-- Global styles using :global() -->
2<style>
3  :global(body) {
4    background-color: #f5f5f5;
5  }
6</style>

In this example, the body element will have a light gray background color, regardless of which component includes this style. Use global styles sparingly and only when necessary, as they can lead to unintended side effects if not managed carefully.

Note: Global styles in Svelte can unintentionally override component-specific styles, cause conflicts, and make debugging harder, especially in larger projects. Since Svelte’s default styling is scoped, prefer local styles whenever possible. Only use global styles when absolutely necessary to avoid unintended side effects.

Now that we’ve covered scoped, component, and global styles, let’s see how they work together in a practical example. Here’s the complete code for the App.svelte and Box.svelte components:

svelte
Copy to clipboard
1<h1>Hello, Svelte!</h1>
2
3<div class="boxes">
4  <Box --color="red" />
5  <Box --color="green" />
6  <Box --color="blue" />
7</div>
8
9<script>
10  import Box from './Box.svelte';
11</script>
12
13
14<style>
15  h1 {
16    color: blue;
17  }
18  :global(body) {
19    background-color: #f5f5f5;
20  }
21</style>

svelte
Copy to clipboard
1<div class="box"></div>
2
3<style>
4  .box {
5    width: 5em;
6    height: 5em;
7    border-radius: 0.5em;
8    margin: 0 0 1em 0;
9    background-color: var(--color, #ddd);
10  }
11</style>

In this example:

• The h1 element in App.svelte is styled with a blue color using scoped styles.
• The body element has a light gray background color applied globally using the :global() selector.
• The Box component uses a CSS variable (--color) to customize its background color, demonstrating component styles.

In this lesson, we explored the three main types of styles in Svelte: scoped styles, component styles, and global styles. Scoped styles ensure that CSS is limited to the component, component styles enable dynamic customization through CSS variables, and global styles allow you to apply styles across your entire application.

Here are the key takeaways:

• Use scoped styles for component-specific styling to avoid conflicts.
• Leverage CSS variables for reusable and customizable component styles.
• Apply global styles sparingly using the :global() selector.

In the practice exercises, you’ll apply these concepts to style components and solve real-world problems. Take your time to experiment with the examples and explore how these styling techniques can be combined to create visually appealing interfaces.

Great job completing this lesson! You’re now ready to dive into the practice exercises and solidify your understanding of styling in Svelte.