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 trialPJ Wehry
13,997 PointsAdding 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-
- Deleting the @Layout section at the top.
- 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.
- 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
Treehouse TeacherPJ,
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
Steven Parker
231,110 PointsJust 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.
PJ Wehry
13,997 PointsPJ Wehry
13,997 PointsThank 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.