Styling component with CSS

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:

• Different ways to add CSS to your component.
• Isolated CSS.
• Shared/Global CSS.
• Embedded CSS.
• External CSS.

You can download the example code used in this topic on GitHub.

Different ways to add CSS to your component

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 Server, there are many ways to add CSS to your component:

• Isolated CSS: A set of rules that only apply to a specific component.
• Shared/Global CSS: A set of rules that can apply to any component in your website.
• Embedded CSS: A set of rules that can apply to one or more components.
• External CSS: A file of rules that can apply to one or more components.

Isolated CSS

To understand isolated CSS technique, you will discover:

• What is isolated CSS?
• How Blazor Server isolates CSS?
• Creating an isolated CSS file.
• Overriding an isolated style.

What is isolated CSS?

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.

How Blazor Server isolates CSS?

Blazor Server generates both CSS and HTML tags. Blazor Server 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.

Creating an isolated CSS file

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:

Overriding an isolated rule

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:

1. The parent component must have an isolated CSS file.
2. The overriding CSS rule must be defined in the parent component isolated CSS file.
3. The overridden CSS rule must be wrapped in a tag with a class in the parent component.

Here are the steps to override an isolated style.

• In the parent component, wrap the child component in a tag with a class.

<div class="overriding">
    <IsolatedStyleComponent></IsolatedStyleComponent>
</div>

• Create an isolated CSS file for the parent component.

• Create a new CSS rule with the syntax: <parent-css-selector> ::deep <overriden-css-selector>.

Shared/Global CSS

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/site.css. The file site.css is imported by default in _Layout.cshtml. For example, in your site.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

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

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>