How do I call an external stylesheet from a .cshtml page?

Question

I have a view page (View.cshtml) and a stylesheet (Style.css).

The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:

<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">

When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?

UPDATE:

View.cshtml

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" /> ‌
    <title>Test Page</title>
</head>

<body>

    <div id="topHeader">
        <br />

        <div id="credentialsBox">

            <div id="texts">
                <div id="word1">Username:</div>
                <div id="word2">Password:</div>
            </div>
        </div>
    </div>
</body>

Style.css

@font-face {
    font-family: 'proximanova';
    src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}


/*CSS Styling Properties*/
body {
    font-family: proximanova;
    margin: 0;
    background-color: #007381;
}

#topHeader{
    margin-top: 15%;
    height: 450px;
    background-color: #d6d6d6;
}

#credentialsBox {
    border-radius: 3%;
    width: 20%;
    margin: auto;
    margin-top: -5%;
    background-color: #ffffff;
}

#texts {
    padding: 14%;
    text-align: center;
}

_Layout.cshtml

<!DOCTYPE html>
<html>

    <head>
        @RenderSection("css", false)
    </head>

    <body>
        @RenderBody()
    </body>

</html>

Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D

Your code looks fine. Have you used your browser tools to check if its being loaded? — , Jan 11 '18 at 11:22
Why styling is not implemented ? , can you show more of your view and some basic style you applied to help others guide better. — Shaiju T, Jan 11 '18 at 11:22
@StephenMuecke I am getting errors with Style.css when I checked with the browser tools. On the network tab, it says my css is (blocked:other). Under the Console tab, it said not allowed to load local resource — thompsonrapier, Jan 11 '18 at 11:29
That should not be happening based on the code you have shown. You should edit your question with the full details of the error message (although you could also try `href="@Url.Content("~/Stylesheet/Style.css")"` — , Jan 11 '18 at 11:36
@StephenMuecke I am unable to see any error via the error log, it just appear in the browser tools. I have tried the code provided, it doesn't work as well. I have been trying different methods for the past 3 hours :( — thompsonrapier, Jan 11 '18 at 11:39
Does your server have permission to view that folder, if so is it set up to serve css files? Also if you try to browse to the css file directly, what happens? — Pete, Jan 11 '18 at 11:39
@Pete I am running it locally, what do you mean "Browse to the css file directly"? — thompsonrapier, Jan 11 '18 at 11:42
Can you just paste your local host `Url` in browser like: `http://localhost:0000/Stylesheet/Style.css` and hit enter , check whether you can see your raw css file in browser ? — Shaiju T, Jan 11 '18 at 11:55
@stom It states "This localhost page can’t be found No webpage was found for the web address:" — thompsonrapier, Jan 11 '18 at 12:04
`The stylesheet is located in a folder called "Stylesheet"` - And where is the "StyleSheet" folder located? Do note that `@Url.Content("~/StyleSheet/Style.css")` is the root of the IIS application (which may or may not be the root of the web site depending on how it is configured in IIS/IIS Express). — NightOwl888, Jan 12 '18 at 00:57
my style.css is in a folder “Stylesheet” in the directory of the solution explorer — thompsonrapier, Jan 12 '18 at 03:20

score 2 · Answer 1 · answered Jan 11 '18 at 11:59

2

You can also use @Url.Content instead for absolute path of css file.

<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />

or

<link href="@Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />

answered Jan 11 '18 at 11:59

Shaiju T

6,201
20
104
196

I have tried but it does not work! The ones you asked me to try on the main question returned me with errors as well. – thompsonrapier Jan 11 '18 at 12:07
ok , there might be issue with IIS port being used or some missing settings in your project. It would be better to reproduce the issue create a new mvc project and paste all the view and css file to check again. – Shaiju T Jan 11 '18 at 12:11

score 0 · Answer 2 · answered Jan 11 '18 at 18:52

If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..

  bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/Style.css));

And in your head section try to replace

<head>
    @RenderSection("css", false)
</head>

with

  <head>
  @Styles.Render("~/Content/css")
  </head>

and see it will make any difference, and we will go from there.

Hi, I do not have a BundleConfig.cs file, as I am running on ASP.NET5 WebApp — thompsonrapier, Jan 12 '18 at 02:29

score -1 · Answer 3 · answered Jan 12 '18 at 07:00

-1

I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.

answered Jan 12 '18 at 07:00

thompsonrapier

155
3
16

How do I call an external stylesheet from a .cshtml page?

3 Answers3