Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

C# ASP.NET MVC Basics Views View Layouts

PJ Wehry
PJ Wehry
13,997 Points
Posted by PJ Wehry
PJ Wehry
13,997 Points

Adding CSS to Cshtml

I have been trying to add CSS to Cshtml. The CSS formatting never shows up. I have been receiving plain text for the last 3 hours when I build the website. This is a part of the HomeController grabbing Index.cshtml. Maybe it's something with that. Here is my current code-

Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="BaseLayout.css" type="text/css" />
    <title>Wehry Home Page</title>
</head>
<body>
    <div>
        <p>Is there anybody out there?</p>
    </div>
</body>
</html>

CSS Code

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Things I have tried/worked through-

  1. Deleting the @Layout section at the top.
  2. Originally the BaseLayout.css was in the /Shared folder. I moved it into /Home next to Index.cshtml to make sure that it wasn't a file pathing issue. I tried both relative and absolute pathing to no avail.
  3. Tried running a Layout.cshtml page in Index and adding CSS through that. Still didn't work.

Thank you in advance! PJ

2 Answers

James Churchill
STAFF
James Churchill
Treehouse Teacher
James Churchill
James Churchill
Treehouse Teacher

PJ,

ASP.NET prevents serving any static content (i.e. CSS or JavaScript files) located in the "Views" folder. The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).

Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can use "Styles" or "Css" or whatever. Then you can load your CSS file from within a view using a link tag:

<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />

Notice the use of the tilde character ("~") in the href attribute. ASP.NET will resolve the tilde to the root of your application.

I hope this helps.

Thanks ~James

PJ Wehry
PJ Wehry
13,997 Points
PJ Wehry
PJ Wehry
13,997 Points

Thank you James. I stumbled on to this answer by accident when I recreated the solution and put the CSS in a Content folder. I wasn't sure that's why it started working, so it's good to know for sure.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Just place your CSS code in the <head> section of the cshtml file, surrounded by <style> tags.

Or if the CSS is intended to be shared across multiple pages, place it in a separate file (and another folder) and use a <link> tag to load it in.