Styling in Svelte | The Basics
Awesome styling in Svelte! In this Svelte tutorial, I start out by showing you Svelte’s default scoped CSS. I then show you how you can, optionally, override this local scoping behavior by using a global modifier. Of course, you can always create a global css file and link to it in the
index.html file. But, there’s a gotcha to this. I show you what that gotcha is in this video. And, as with any good framework, we can set CSS style and class properties to have dynamic values. This way we can set style properties dynamically or conditionally toggle a class on or off. Svelte makes working with CSS super easier. Created by Gregg Fine.
#svelte #webdevelopment #webdev #sveltekit #javascript
🎓 The Code Creative Store: Courses and Free Tutorials!
https://store.thecodecreative.com
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
👭Join The Code Creative Community on Facebook:
/ thecodecreative
🌐 The Code Creative Official Website
https://www.thecodecreative.com/
🎓 The Code Creative Courses
https://www.thecodecreative.com/courses
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 Introducing styling in Svelte
00:14 Creating basic styles in a component
00:58 Scoped CSS
02:50 The global modifier
03:10 Global stylesheet
04:50 Inline styles
05:25 The style directive
06:05 Dynamic styles
06:45 The style directive shorthand
07:20 The class directive
08:35 The class directive shorthand
08:55 Conditional class toggling
09:35 Setting multiple style and class directives
▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬
The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor.
▬Social Media ▬▬▬▬▬▬▬▬▬▬
▸ Twitter - @GreggFine
▸ Instagram - /greggfinedev
▸ Facebook - / thecodecreative
✅ Recommended related videos:
Debouncing Explained
• Debouncing Explained | JavaScript
Memoization Explained
• JavaScript Memoization Made Simple!
Sorting in JavaScript Explained
• JavaScript Comparator Function | Sort...
✅ For business inquiries contact me at [email protected]
Watch video Styling in Svelte | The Basics online without registration, duration hours minute second in high quality. This video was added by user The Code Creative 16 June 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,673 once and liked it 41 people.