1
WTF is Svelte?
1m 7s
2
Create a new project with Svelte 3
33s
3
Add data to HTML markup using Svelte 3
35s
4
Add styles to Svelte 3 component
48s
5
Create a new Svelte 3 component to render it inside of another component
1m 16s
6
Declare and pass in properties to a Svelte 3 component
1m 18s
7
Compose components with slots in Svelte 3
1m 18s
8
Use named slots to compose multiple components in Svelte 3
1m 45s
9
Render HTML directly into a component in Svelte 3
46s
10
Use Svelte 3 transitions to gracefully show and hide DOM elements
1m 39s
11
Use reactive declarations to compute component state in Svelte 3
1m 27s
12
Loop over and render a list of data using an `each` block in Svelte 3
1m 15s
13
Use await block to wait for a promise and handle loading state in Svelte 3
1m 23s
14
Use DOM events and event modifiers in Svelte 3
1m 22s
15
Use an onMount lifecycle method to fetch and render data in Svelte 3
1m 4s
16
Use Svelte 3 stores to share data between multiple unrelated components
1m 44s
17
Set a value to a Svelte 3 store
45s
18
Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores
1m 17s
19
Tween a value and dynamically update the DOM with Svelte 3
1m 32s
20
Create a new Svelte project with TypeScript support
3m 35s

Add styles to Svelte 3 component

svelte

Share this video with your friends

In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.

Important note - styles are scoped to the component which means that if we style a h1 tag in component A, it won't automatically affect h1 tags in component B.

Add styles to Svelte 3 component

Share this video with your friends

Course

Up and running with Svelte 3