I have a normal HTML page on my IIS8 development machine. Very basic and doesn't contain any code yet.
To the HEAD I've added a css file deceleration I've created:
<link href="css/catalog.css" rel="stylesheet" />
When inspecting with either chrome or fiddler it reports a 404 - but not because the file isn't there - but because it's adding another css folder:
GET http://localhost/mywebsite/message/css/css/catalog.css 404 (Not Found)
which should actually be:
http://localhost/mywebsite/message/css/catalog.css
strange thing is that if I change the name of the folder to anything but CSS it works.
any ideas to why this is happening?
Thanks
Just use this and you'll be good to go:
<link href="catalog.css" rel="stylesheet" />
EDIT:
<link href="/catalog.css" rel="stylesheet" />
Related
hii all i am currently learning external css so i used link tag which helps me out with external css. So basically guys the format of link tag which it shows to me in atom is
<link rel="stylesheet" href="/css/master.css">
so the first slash in href tells about root which i don't know in detail as have not yet studied js. So i have removed it. to get the external css correctly i have done all the correct steps regarding it but the problem arises here....
<link rel="stylesheet" href="css/style.css">
( i applied this due to that i am not getting desired out put )..
So done some research and i came to point that by appling this layout of linktag i am getting desired out put
<link rel="stylesheet" href="C:\Users\KUSH\Desktop\UDEMY WEEB DEVELOPMENT 2022\css\styles.css">
this is the path of my external css folder.
but my prof is using this 👇
<link rel="stylesheet" href="css/style.css">
and she is getting desired outputs
so pls help me out with that.....
Try this:
<link rel="stylesheet" href="./css/style.css">
the ./ means that the path start from the current folder where your Html file is located
You need to put your HTML file and CSS file in same folder which make your work easierhere is the example if you I am not understandable
My External css file is not linked to my html page.
I had with inside a folder with path
->app-->css-->layout.css
->index.html
In my index.html file I linked it like
<link rel="stylesheet" type="type/css" href="app/css/layout.css">
it won't link it.
i searched for the file in the chrome (inspect-->sources) and the css file wasn't listed there
I then put the layout.css and index.html in the same path.
<link rel="stylesheet" type="type/css" href="layout.css">
it still didn't work. I checked in multiple browser like chrome and firefox as well but it didn't work.
Not sure if it is causing the error(most probably is), but type should be text/css instead of type/css.
Just replace the type/css to text/css and there is no need to write full path name in href.
You can directly use the command below to get the desired result
<link rel="stylesheet" type="text/css" href="layout.css">
Its a very common mistake that everyone do... Please notice that here type="text/css" not
type/css...
Regards,
Om Chaudhary
I have a weird/frustrating problem. I'm trying to link my CSS stylesheet to my HTML and when I check in the Chrome dev tools what the file looks like live (rather, why my styling isn't working), I'm getting an entirely different file showing as my .css file.
Here's my file directory:
- app
- public
- file1.html
- file2.html
- assets
- style
- reset.css
- style.css
And here's the head of file1.html:
<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/style/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/pure-min.css" integrity="blahblahblah" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/grids-responsive-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../../assets/style/style.css">
The last line is my relative path.
The contents of file2.html are showing up as the contents of style.css when I look at it through dev tools, but all that really is in style.css is some styling for the h1 element. Am I just being a dummy with the relative file path for the CSS file? I thought maybe the other CSS stylesheets were impeding this style sheet, but commenting them out still results in the contents of file2.html as my css file. What am I missing?
Your path seems to be right, but it could be because you are missing a closing quotation for your integrity attribute.
So this is within an express app and I hadn't served up my public folder so that it could use it to access static files.
Needed this:
app.use(express.static(path.join(__dirname, '../public')));
Your third link is missing a " after blahblahblah.
Try fixing that.
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I'm having trouble setting up the href of my CSS.
My projected is located at
www.mysite.com/myproject/
My css is located at
www.mysite.com/myproject/styles/css/css.css
When I'm at www.mysite.com/myproject/, everything works fine. but when i go into a directory, (www.mysite.com/myproject/dir1/) the css is no longer found. My guess is that it's looking for the css at www.mysite.com/myproject/dir1/styles/css/css.css.
I'm currently using master pages. How do I properly reference the css?
Edit:
This is currently how i reference my CSS.
link rel="stylesheet" type="text/css" href="/content/css/bootmetro.css"
but it doesn't work properly because the project is not located at the root (www.mysite.com). it is located at www.mysite.com/myproject/. So having the "/" causes the css not to load at all.
Set the css path like this, starting slash means root of the site.
/styles/css/css.css
Have you tried:
link rel="stylesheet" type="text/css" href="../styles/css/bootmetro.css"
Assuming you are using ASP.NET, try like this:
<link rel="Stylesheet" type="text/css" href="<%= ResolveURL("~/content/css/bootmetro.css")%>" />