Blazor - Adding CSS Styles

In the previous article I showed you how to separate the view code from the C# code. In this lesson we will work on the same project (default Blazor Web App template) and will show you how to style, how to add CSS files in Blazor app.

Bootstrap

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

Common styles

If you have some common CSS styles, you can put them in the wwwroot folder. There is also an app.css file here, which also contains a lot of default styles.

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {

    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

And if you have common styles for all components, for the entire application, the easiest way is to put them in this file and, as I mentioned, they will be applied to your entire application.

If you add some styling here, e.g. for a button:

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

This will be applied everywhere, for all elements with class btn-primary. At this point we set the background color of all buttons to black and the font color to white.

There is nothing new here for now.

Styling components

However, Blazor, in addition to introducing such, let's call them, common styles, allows us to introduce styles only for a given page or one specific component.

And that's great.

Then we have dedicated styles only for a specific component in a separate file. Thanks to this, the file does not bloat so much and it is very readable. If we want to change something in our component, we do not have to look for styles in a common file but in the dedicated one.

If you want to add styles dedicated to a subpage or a component, just like I showed in the previous article - add a new file next to the view, this time with the view name and the razor.css extension.

In our case it will be Counter.razor.css

.btn-primary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

I've added the CSS code here, where I change the background color to white and the font color to black for elements with the btn-primary class.

And if you now add, for example, a new button in Home.razor:

<button class="btn btn-primary">Click me</button>

It is after launching the application that you may notice that:

• In the Home.razor view we have a white button with black font.
• In the Counter.razor view we have a black button with white font.

So we easily managed to add dedicated styles just for our Counter component.
The Home.razor page, on the other hand, uses shared styles.

How does it work?

If you run the application. Go to the Counter page, then to the page source, you can see that an attribute has been added to each element, in this case: b-mgw85zt6f4 and this is an identifier for this component. Thanks to this, you can add unique styles only for 1 specific component. Of course, if you created another component with dedicated CSS styles, there would be a different identifier there.

This is what it looks like in DOM:

<button class="btn btn-primary" b-mgw85zt6f4="">Click me</button>

.btn-primary[b-mgw85zt6f4] {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

So this styling is another plus for Blazor.

Blazor School

By the way, if you would like to learn Blazor from the inside, consider joining my online training - Blazor School (more information here - https://blazor-school.com/).