Learn CSS Styles and CSS Isolation by building fishcard | .NET fullstack dev - 006
🍿 6th video on Blazor Web Assembly (WASM). We are going to learn the basics of CSS and CSS isolation in Blazor.
See the live site at: https://fishcard.codewithsaar.net.
🍔 Takeaways
There are 2 types of css files in Blazor: global and isolated.
Expand isolated style by using ::deep property.
All css are referenced in index.html.
Center a div using Flexbox.
Leverage css variables.
For more videos like this:
💡Subscribe to my channel - https://www.youtube.com/CodewithSaar?....
🧩 Resources
Blazor official tutorial: https://dotnet.microsoft.com/en-us/ap...
Blazor Components Official Document: https://docs.microsoft.com/en-us/aspn...
📺 Demo code:
Fishcard source code: https://github.com/xiaomi7732/CodeWit...
💬 Discord server for Code w/ Saar: / discord
🏠 My home page: https://www.codewithsaar.com
➡️ Reach me on Twitter @SaarShen.
➡️ Or if you are only interested in channel content: @CodeWithSaar.
☕ If you want to buy me a coffee: https://www.buymeacoffee.com/codewith..., and thank you!
🔖 Chapters
00:00 Introduction to 2 types of css in Blazor - Global and isolated.
02:37 Demo: Global CSS
04:09 Demo: Isolated CSS
05:41 Expand isolated CSS scope by ::deep pseudo element
07:15 Fix up fishcard styles - homepage links
09:09 Underline for a tag upon hover
10:12 Center a div
11:39 Fix stacked buttons
12:18 Bonus: Variables in CSS