CSS Handling | FREE Blazor Crash Course (.NET 5) #5

CSS Handling | FREE Blazor Crash Course (.NET 5) #5

This video is part of The FREE Blazor Crash Course. We build an actual Blazor WebAssembly application based on .NET 5. Learn about CSS handling for Blazor applications. We will discuss the difference between local and global CSS definitions and how CSS isolation makes the developer's life easier.

This video is part of The FREE Blazor Crash Course. In this crash course, we build an actual Blazor WebAssembly application based on .NET 5.

In this video, we will learn about CSS handling for Blazor applications. We will discuss the difference between local and global CSS definitions and how CSS isolation makes the developer's life easier.

This time, we won't implement new components for our FinanceMentor application but will make the existing components look better.

If you followed along as we build the FinanceMentor application, you saw that we already used a lot of CSS in our project. We used Bootstrap to style our Earnings page and implement our modal dialog component in previous videos.

The main benefit of using CSS isolation is that we can use short and descriptive names for our CSS classes and don't have to be afraid of any name clashes across our application or any external CSS definitions like Boostrap.

  • 00:00 About This Course
  • 00:46 How Does CSS Work in Blazor?
  • 01:26 Using Bootstrap CSS Definitions
  • 02:50 How Blazor Loads CSS Files
  • 04:04 CSS Isolation in Blazor
  • 07:15 CSS Preprocessor Support
  • 07:51 Local vs. Global CSS Definitions
  • 08:36 Housekeeping
  • 09:39 Summary
  • 10:00 What's Next?

📋 Source Code: https://github.com/claudiobernasconi/FinanceMentor/

blazor webassembly dotnet

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly appli...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we will see how to create a simple CRUD (create, read, update, and delete) application for ASP.NET Core ...

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we will see how to create a simple CRUD (create, read, update, and delete) application for ASP.NET Core ...

Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application

The Blazor platform provides support for lazy loading assemblies starting with .NET 5 Preview 8. The Blazor lazy loading of assemblies works only in Blazor WebAssembly (WASM) applications. Syncfusion provides individual NuGet package support, starting from the 2020 Volume 4 (v18.4.0.30) release. So, we can now utilize the lazy loading Blazor assemblies feature with our Blazor UI components.