Svelte 101: Style your Svelte component [1/2]

Let’s add some styles to your Svelte component. Styles are scoped in Svelte, meaning, all the selectors will only apply to the elements within the Svelte component. This means 1) You don’t have to worry adding a style will break the style of elements outside of this component 2) Svelte will warn you if your selector does not match any elements within this component Also, @keyframes animations are scoped too! Of course there’s always a way to disable the scoped style behaviour if you choose not to scope your selector or @keyframes. Introduction 00:00 How styles are scoped 00:54 Svelte warns for unused selectors 03:38 How scoped styles work 04:32 Scoped @keyframes 06:59 Disable scoped style behaviour 09:16 --- 💻 REPL 📚 Related Resources Svelte Svelte REPL Svelte Tutorial 🥰 Support me 🔗 Want to learn more from me