Styling a component is a great way to branding your website as it has a unique style and consistent between pages. In this tutorial, you will learn:
You can download the example code used in this topic on GitHub.
CSS will help you to change the look of an element in your component. For example, you want a text box with a red border instead of the default gray border. In Blazor WebAssembly, there are many ways to add CSS to your component:
To understand isolated CSS technique, you will discover:
Isolated CSS is a technique that allows you to reuse a CSS selector name. With this technique, the CSS rules will only apply to a specific component. This technique prevents the CSS name pollution. The following image illustrates the difference between isolated CSS and shared CSS model.
Blazor WebAssembly generates both CSS and HTML tags. Blazor WebAssembly will attach an attribute for each HTML tag and, later on, use this attribute with the CSS selector to make the CSS scoped to these HTML tags.
Assuming you already have a component, add a new CSS file at the same folder of your component with the name <YourComponent>.razor.css
. The result will look like this:
Sometimes, the isolated rule of a component does not fit your current theme, and you want to change it. The following image illustrates what is overriding an isolated rule:
Isolated CSS does not mean you must not override it. Isolated style means it would not be overridden by default. Override the isolated CSS of a component will not impact on the other places of your website. To override isolated CSS of a component, you need to make sure:
Here are the steps to override an isolated style.
<div class="overriding"> <IsolatedStyleComponent></IsolatedStyleComponent> </div>
<parent-css-selector> ::deep <overriden-css-selector>
.Shared or global CSS is a technique that allows you to re-use the defined CSS rules in any component. By default, you can define the shared CSS rules at /wwwroot/css/app.css
. The file app.css
is imported by default in index.html
. For example, in your app.css
file, you define a new CSS rule as follows:
.global-style::after { content: "This is a global style." }
And then you can use the .global-style
class in any of your component:
<h3 class="global-style">SampleComponent1.</h3>
Embedded CSS is a technique that embeds the CSS rules in the component file. When using this technique, you will take several risks such as repetition of CSS rules, unexpected overridden CSS rules. You can implement this technique by adding a <style>
tag in your component file. For example:
@page "/embedded-style" <h3 class="embedded-style">EmbeddedCssStyle.</h3> <style> .embedded-style::after { content: "This is an embedded style."; } </style>
External CSS is a technique that similar to Embedded CSS technique but instead of embed the CSS rules inside your component, the CSS rules are being defined in an external file and the component uses the <link>
tag. For example:
<link href="/css/external-css-file.css" rel="stylesheet" /> <h3 class="external-style">ExternalCssStyle.</h3>