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.

🍔 Takeaways

* There are 2 types of css files in Blazor: global and isolated.
* Expand isolated style by using ::deep property.
* Center a div using Flexbox.
* Leverage css variables.

For more videos like this:

🧩 Resources

📺 Demo code:

➡️ Reach me on Twitter @SaarShen.
➡️ Or if you are only interested in channel content: @CodeWithSaar.

🔖 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