Here is a sample of my code:
<!doctype HTML>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="C:/Users/OneDrive/Programming/HTML/css/test.css">
</head>
<body>
<h1>This is a heading.</h1>
<p1>This is a paragraph.</p1>
<ul>
<li>This is the first element of a list</li>
<li>This is the second one.</li>
</ul>
<button type="button" onclick="alert('That tickles...')">Press me!</button><br>
<button type="button" onclick="">I do nothing. :-(</button>
</body>
</html>
What the situation is my CSS file...
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
... is located in the following way:
HTML/
..../home.html
..../css/
......../test.css
I've tried to access the css via href="css/test.css" but to no avail. What am I doing wrong?
P.S. Any optimisations to my code?
This is correct:
<link rel="stylesheet" type="text/css" href="css/test.css">
But in your code isn't any p tag only p1. So replace this:
p {
font-family: Courier New;
color: white;
background-color: lightblue;
}
With this:
p1 {
font-family: Courier New;
color: white;
background-color: lightblue;
}
(Sorry for my english. I'm from czech republic)
When you are accessing local files, you have to specify the file URI scheme (file:///):
<link rel="stylesheet" href="file:///C:/Users/OneDrive/Programming/HTML/css/test.css">
or use a relative path:
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" type="text/css" href="/css/test.css">
I would say check the spelling of the filename of your actual css file. Make sure it actually is test.css and not tst.css or tesy.css or some other typo. Check the folder name for typos too.
If your css file is somewhere inside your project folder just like your HMTL file I'm guessing a typo has to be the issue. For example, if your project structure looks like this
yourProjectFolder
||
||_ index.html
|
|__ stylesFolder
|
|_ test.css
Your script would have to look like this
<link rel="stylesheet" type="text/css" href="stylesFolder/test.css">
If this is indeed the way you're targeting your file and you're getting errors you have to be spelling something wrong somewhere along the way.
Related
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.
This is my first attempt at writing some LESS css code and I can't seem to get it to compile. I'm sure I'll be missing something simple but I can seem to find what it is.
My Styles are declared as follows:
<!--Styles & JS-->
<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
And my LESS file looks like this:
//Theme Colours
#headingcolor: #212d43;
#accentcolor: #005bc4;
#textcolor: #FFF;
#footercolor: #0856a1;
//Theme Fonts
#font: 'Sniglet', cursive;
//Theme Sizes (1980)
#mainfont: 12px;
#h1: #mainfont + 6;
#h2: #mainfont - 1;
#footerlinks: #mainfont - 2;
//Styles
header {
background: #headingcolor;
color: #textcolor;
font: #font #mainfont;
padding:10px 36px 15px 36px;
}
Try to load your stylesheet before the js. With your theme.less, the following code is working:
<body>
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<header></header>
</body>
If everything is working, you should find in your browser console some messages like:
less.min.js:13 rendered http://localhost:8000/theme.less successfully.
less.min.js:13 css for http://localhost:8000/theme.less generated in 19ms
less.min.js:13 less has finished. css generated in 20ms
I'm new at this so I'm sure I'm just missing something. I can't get the background image to show up. I tried all different paths and also tried just copying the image address of a web background to see if that would work.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>REDACTED</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="logo">
<h1>REDACTED</h1>
<p>Aspiring Web Developer</p>
</div>
<nav>
<ul>
<li class="selected">About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<img src="img/julie.png">
<h2>About Me</h2>
<p>REDACTED</p>
</main>
</body>
</html>
And here's the body CSS:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
In your hierarchy, you are trying to go back one directory and then go to img/geometry.png, this is the issue, because when you link the css file in your html, you don't need to use '../', you can access directly img folder!
Try this:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('img/geometry.png');
}
And don't forget to put geometry.png inside the img folder!
As a #MarcosPerezGude noted, make sure your paths match your directory structure (or possibly visa versa in this case). With what you have provided this is what your directory structure and files should look like:
/index.html
/css
/style.css
/normalize.css
/img
/geometry.png
And as others have pointed out, the following:
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../img/geometry.png');
}
needs to be in in style.css or normalize.css with the directory structure given above.
i dont see that my web page is changing according to the style defined in the css file. when i added the same in html file, it is working. can someone please help. dont know what is wrong.
below is my simple html file
<html>
<head>
<title>css</title>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
test
</head>
</body>
</html>
below is my css file.
<style>
body
{
background-color:lightblue;
}
</style>
<style>
body {
background-color:lightblue;
}
</style>
is not a right way to write a .css file.
Remove those style tags from your .css file and check again.
Also,
Make sure your .html and .css files are on the same path
(In order to make things work without changing the link tag in your html head
Just noticed:
Your body tag is INSIDE your head tag. Which is incorrect.
Right way to do so is,
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Change css file as: Remove <style> </style>
body
{
background-color:lightblue;
}
Also correct the format of html as
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
This works for Me. Make sure your html and css both the files should be in same folder.
Try this.
HTML-
<html>
<head>
<title>css</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
test
</body>
</html>
CSS-
body {
background-color: lightblue;
}
You wrapped the head tag around everything. And a link tag should always be placed between head tags and not in the body tag.
your code should be like the example below. All the rest seems fine.
<html>
<head>
<title>css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test
</body>
</html>
Css should be like this:
body {
background-color:lightblue;
}
always css link in head section, u can also see the path of the file, Do not use type attributes for style sheets (unless not using CSS),Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers
type="text/css"
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
hello
</body>
</html>
You are using wrong CSS syntax. In a CSS file, there are no <style></style> tags, they are just rules. So you should have:
body
{
background-color: lightblue;
}
Also, you should link your CSS file into the <head> tag, it is better for your file's organization.
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?