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.
Related
I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?
Please help to check why I cannot link club.css to index.html.
index.html (Please note: I have to use the direct local path as the CSS link, or it will show that "some content has been disabled in this document.")
<head>
<meta charset="utf-8">
<title>The California Corgi Dog Club</title>
<link rel="stylesheet" type="text/css" href="C:\Users\leeson\Desktop\CS651 Web Systems\assignment\assignmentfall2021-Rijutady\clubProject\club.css" />
</head>
club.css (Please note that the css file is under Encoding utf-8)
h1 {
background-color: skyblue
}
The Simple Answer
Using a relative path should resolve your issue for most situations.
<link rel="stylesheet" type="text/css" href="./club.css"/>
The Alternative
You could also include the CSS directly into the HTML document, however this is not always ideal or recommended. Here's an article on that.
<style>
h1 {
background-color: skyblue
}
</style>
#NullPointDev's answer is correct. Use Relative path to your projects. It will make your work easier without errors. I just put some additional information for make your project easier.
If both HTML and CSS files in same directory, You can link your CSS like this,
<link rel="stylesheet" type="text/css" href="club.css"/>
If the CSS file is located in another directory in the directory which the HTML file located, you can use this method.
<link rel="stylesheet" type="text/css" href="name_of_the_subdirectory/club.css"/>
If the CSS file located in out of the directory which the HTML file located, Use ../ to go back.
<link rel="stylesheet" type="text/css" href="../club.css"/>
Read this Article for more info. Relative Path | W3 Schools
Now you know all the basics of Relative path. Wish you all the best.
no ,
it will be <link rel="stylesheet" type="text/css" href="club.css" />
if its under the clubproject
The solution code for your question is:
<link rel="stylesheet" type ="text/css" href = "club.css">
Your mistake : You have written the complete folder path instead of relative file path.
Advice: Have a look to the below link to clear concept.
https://www.w3schools.com/html/html_filepaths.asp
I prefer simple solution which is using relative path.
club.css
<link rel="stylesheet" type="text/css" href=".\club.css" />
Where is the problem:
URLs cannot contain spaces
I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
I managed to create a new app on Openshift and the basic template that they provided me with is working. The only thing I added to it is:
<head>
...
<link href="styles.css" rel="stylesheet">
</head>
and a file styles.css in the same directory as index.html. In the css file I just changed the footer to red. When I click on index.html my browser shows the changes, but when I upload the files to Openshift nothing changes and I get:
GET http://bgl-boardgamelab.rhcloud.com/styles.css 404 (Not Found)
I think I'm making some silly mistake, but can't figure what it is.
Turns out I had to add the following to my .initializeServer function to serve all my static files:
self.app.use(express.static(__dirname));
try
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
Try full path url like:
<link href="http://localhost/myproject/styles.css">
or
<link href="http://examplesite.com/styles.css">