© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
C#C
C#•14mo ago
Davaaron

Blazor css not applied

Hi,

i have a component css file for my blazor component where i have definied
.preview-container .markdown-body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.8;
    padding: 1.5rem;
    background-color: #ffffff;
    color: #2c3e50;
}

/* Headings */
.preview-container .markdown-body h1 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-size: 2.5rem !important;
    color: #2a9d8f !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 0.5rem !important;
}
.preview-container .markdown-body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.8;
    padding: 1.5rem;
    background-color: #ffffff;
    color: #2c3e50;
}

/* Headings */
.preview-container .markdown-body h1 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    font-size: 2.5rem !important;
    color: #2a9d8f !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 0.5rem !important;
}


However, when I look at the rendered html in the browser, i see the h1 is not 2.5rem and got overwritten by user agent stylesheet. What is that? I also noticed that the first css is applied but the second one is not. How does that come? How can I fix that?
I attached a screenshot of the DevTools so you can see the html and css.
image.png
C# banner
C#Join
We are a programming server aimed at coders discussing everything related to C# (CSharp) and .NET.
61,871Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Blazor CSS not loading properly
C#CC# / help
5mo ago
Blazor Isolated CSS not working
C#CC# / help
17mo ago
❔ Blazor WebAssembly CSS
C#CC# / help
3y ago
C# Blazor CSS Isolation
C#CC# / help
2y ago