CODEWITHSUNDEEP
htmlcssgetarduinolocalhost
user5365562
user5365562

Reputation:

Can't load external css when in localhost

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

Folder Structure

Here is my main.css file inside the css folder

Contents of css folder

my main.css file is within the css folder, i am working off of the interface.html file

Upvotes: 2

Views: 22633

Answers (7)

Dylan.Rockefeller
Dylan.Rockefeller

Reputation: 87

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.

Upvotes: 0

Danish Kazmi
Danish Kazmi

Reputation: 111

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(); ?>" />

Upvotes: 0

Rajnish Sharma
Rajnish Sharma

Reputation: 1

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......

Upvotes: 0

Venkatesan
Venkatesan

Reputation: 178

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>

Upvotes: 1

5413
5413

Reputation: 80

this is what i have tried and it is working for me

 <link href="./main.css" rel="stylesheet" type="text/css" />

thanks

Upvotes: 2

Diogo Garcia
Diogo Garcia

Reputation: 27

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"

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

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">

Upvotes: 5

Related Questions