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
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" />
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.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
Related
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
I am trying to build a dialog using AngularMaterial and in the demo it has css code:
.dialogdemoBasicUsage #popupContainer {
position: relative;
}
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px;
}
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px;
}
.dialogdemoBasicUsage button {
width: 200px;
}
.dialogdemoBasicUsage div#status {
color: #c60008;
}
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
margin-bottom: 0;
}
In my angularJS project - where do I put this code? do i create a new .css file and then reference it and do I have to put anything around it?
It is the same way how you do it in normal HTML application.
Add the css code to a file named style.css , refer it inside
<head>
<title>To Do List</title>
<link href="style.css" rel="stylesheet" />
</head>
DEMO
In normal use case you should include the CSS file come with the library.
By the user guide of material CSS, you should include these files in your HTML
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
If you need further modification on top of their CSS, make a new CSS file and include it below angular-material CSS file in <head>
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
I can not get a simple CSS to apply to my jsp page. The page displays, but just black on white (no underline). The TOMCAT localhost_access_log shows the GET of the CSS is successful (200).
using Tomcat with directories:
web-apps/myapp
--jsp -- cat_list.jsp
--css -- main.css
--WEB-INF
main.css:
h3 {
background-color: blue;
text-decoration: underline;
}
cat_list.jsp:
<!DOCTYPE HTML>
<html>
<head>
<title>Category List</title>
<LINK rel="stylesheet" type="text/css" href="css/main.css" media="screen">
</head>
<body>
<h3> Test Text </h3>
</body>
</html>
What am I missing?
guys i have a css file "menu.css" i called it in the head of my master page but it does not seem to work.
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
i tried many alternatives such as
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
But all to no avail. However when i paste the content of the css in the master page head there by eliminating the css file, it then works. I really don't understand what the error is. All seem ok but it is not doing as expecteed. Below is my Master page. Any help would be appreciated.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Debt.master.cs" Inherits="Debt.Debt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link id="Link2" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<title>Members Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
* { margin:0;
padding:0;
}
body { background:#555 url(images/back.jpg); }
#menu { top:30px; }
#copyright {
margin:100px auto;
width:80%;
font:12px 'Trebuchet MS';
color:#bbb;
text-indent:20px;
padding:40px 0 0 0;
}
#copyright a { color:#bbb; }
#copyright a:hover { color:#fff; }
.style1
{
}
.ModalBackground
{
background-color:Gray;
filter: alpha(opacity=60);
opacity: 0.6;
z-index: 10000;
}
.ModalPopup
{
background-color:White;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:5px;
width: 350px;
height:210px;
}
</style>
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body runat="server">
Thanks guys for all the help. I figured what the error was. It was the images path form the CSS. i called the images as follows
background:url(images/columns.png) no-repeat;
background:url(images/subitem.png) no-repeat;
For some reason, it does not recognizes the above images path. However when i changed to
background:url(/images/columns.png) no-repeat;
background:url(/images/subitem.png) no-repeat;
That is adding a slash before the folder name. It works fine now. Thanks for your time.
If you are using Visual Studio 2012 you can simply drag any CSS or JS file from the solution browser into your HTML document, and the editor creates the link statement for you. I personally prefer this approach as it eliminates the chance of path errors.
Hope that helps!