Previous tip (Modify the HTML Head from a component) Next tip (Use CSS Isolation with child components) >>

Keep your CSS specific with CSS Isolation

Sometimes you want to apply CSS to one specific component in your app, without those styles affecting other parts of your app.

CSS isolation makes this possible. Create a .css file for your component:

Counter.razor.css (for Counter.razor)

Any CSS you put here will only apply to the Counter component and its elements.

Counter.razor.css
h1 {
    color: red;
    font-family: Tahoma, sans-serif;
}


/* Counter.razor */
<h1>This will be red!</h1>


/* Home.razor */
<h1>This won't be affected</h1>