Svelte by Example: Styles & CSS

Svelte supports <style> tags to style components with scoped CSS.

In this example, we'll explore Svelte's styling options on a simplified Todo component.

Styles can be added to a Svelte component in a <style> tag. In practice, Svelte components have the style tag at the end of the file. Styles are scoped to the component.

Todo.svelte


<script>
  export let task;
</script>

<p>{task}</p>

<style>
  p {
    color: red;
  }
</style>

This will not affect the p in Todo because it's scoped to the current component.

Wrap a selector in :global to add a global style that affects elements outside the component.

TodoList.svelte

<script>
  import Todo from './Todo.svelte';
</script>

<Todo task="Mow lawn" />

<style>
  p {
    color: green;
  }

  :global(input[type="checkbox"]) {
    accent-color: green;
  }
</style>

resources://