Super simple question, but this is not working for me. I have googled it, but for some reason, I am not sure.
I am trying to render my CSS styling in my index.ejs file (essentially my index.html)
My stylesheet is located in Base Directory > public > css > stylesheet.css
and my index.ejs file is located in Base Directory > views > index.ejs
This is currently how I am trying to pull in my stylesheet in my index.ejs:
<link rel="stylesheet" type="text/css" href= "/public/css/stylesheet.css" />
Is there anything wrong with this approach?
Edit:
Using href= "../public/css/stylesheet.css" and CMD+click I am able to go to the stylesheet, so the syntax above must be correct... but it is not rendering
Note: I am also using express
It should not be with respect to the HTML file and not the base directory
<link rel="stylesheet" type="text/css" href= "../public/css/stylesheet.css" />
Try using
href="../public/css/stylesheet.css"
. Most probably your href is searching for the stylesheet.css in the public/css/stylesheet of the current directory (which doesn't exist) instead of Base Directory
Using /css/stylesheet.css worked.
Becuase I am using
app.use(express.static(join(__dirname, 'public')));
In my express file, the href already includes /public
Related
I'm working on an HTML-based game using Node.js and I'm now working on the front end interface of it. I'm trying to link a CSS stylesheet, but I am getting a strange issue.
My folder structure is set up as follows:
C:\Users\myname\Documents\gamename, and within the gamename folder is the app.js file, and within client I have the index.html file to serve to the client. Within the client folder I also have the stylesheet, w3.css
Within the app.js I have the following line:
app.use('/client',express.static(__dirname + '/client'));
Inside index.html I have the following line:
<link rel="stylesheet" href='w3.css'>
However, when I run the server, it seems it cannot find the stylesheet. When I open the html file locally, it is able to find the CSS file.
Any ideas about how to fix this? I'm just using the link from W3schools that hosts the page, but I really need to edit and add my own parameters.
how did you tried to import your stylesheet in the link tag ?
did you write it something like that ?
<link rel="stylesheet" href="http://localhost:3000/client/w3.css" />
Use this in your app.js
app.use(express.static(__dirname + '/public'));
and add css like
<link rel="stylesheet" type="text/css" href="css/style.css" />
dont need / before css like
<link rel="stylesheet" type="text/css" href="/css/style.css" />
How can I include css files using node, express, and ejs?
I am building a web project at Eclipse in Java. I wrote a simple HTML and CSS files but I can't see how to link them and I can't spot the problem.
<link rel="stylesheet" type="text/css" href="css/AdminOptionCss.css" >
My files are located here:
you have to give a relative path of that css file , it means that :
your HTML's are in html folder , but your CSS's are not in html folder but your are trying to load them from html folder!
what you need to do is, go a step backward in directory by using ../ and continue pathing, something like this :
<link rel="stylesheet" href="../css/AdminOptionCss.css" >
Try to do like this
<link rel="stylesheet" type="text/css" href="../css/AdminOptionCss.css" >
../ help you to navigate out of html location path , and after go to css and so on
Change your Eclipse view to "Navigator" to see the real file path and use a relative path, like href="../css/AdminOptionCss.css" in your link tag.
I have two folders. One called app, which contains index.html, sass, img. And second build with folders: css, js. What path should I type in index.html to access the style.css file, which is in build/css/style.css ? I tried this, but it doesn't work.
<link rel="stylesheet" type="text/css" href"build/css/style.css">
Your css and js folders should be in same directory as the app where index.html is then try css/style.css
<link href="css/style.css" rel="stylesheet">
So app, which contains index.html, sass, img , should now also contain js and css folder. Then it should definitely work.
If keeping the file directory as is, you should understand.
*Starting with / returns to the root directory and starts there then ../ moves one directory backwards and starts there and so on ../../. In that case
<link href="../build/css/style.css" rel="stylesheet"> should work.
Include this in your html file:-
<link rel="stylesheet" type="text/css" href="../css/style.css">
If your both folder 'app' and 'build' are siblings then use this
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
You should change it become
<link rel="stylesheet" type="text/css" href"../build/css/style.css">
Your index.html is on "app" folder and the css is on "another folder" which have the same path with "app" folder. So you need to get out from the "app" folder first with "../" then redirect it into your destination folder. If you need to get out from current folder you're in twice it'll be like "../../your/destination/folder" and coulde be more.
<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder
Relative path is relative to the file where you put the reference. Here in your case, style.css is in build/ folder which is next to app folder that covers index.html. So if you want to make a reference to style.css from within index.html, usually you should use the relative path ../build/css/style.css.
But make sure the css file is really reachable. It depends on whether you are using a web server, what web server you are using, and what is the starting point from which you run your project.
If you simply open index.html by clicking the file from file explorer, then you can use this to make style.css work:
<link rel="stylesheet" href="../build/css/style.css">
However the above method is not recommended. Normally you will want to make use of a web server to serve such static files like js, css.
I would recommend you to try lite-server which is a light weighted web server let allow you to do local development and checkout what you've been done immediately by visiting something like http://localhost:8000.
When you are using a web server to serve static files, make sure you start running it with a starting point that already covers app and build folders (such that all of the files you want are reachable), for instance, with the parent folder of those 2 folders. If so, when you want to open index.html, you are going to visit something like http://localhost:8000/app/index.html (Because index.html lies under app/ folder, you need to add the "app/"). When this layout is applied, you have at lease 2 ways to insert the css lines:
<link rel="stylesheet" type="text/css" href="../build/css/style.css">
or
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
What if you don't want to add the "app/" while visiting index.html? Then you could move index.html out of app folder, right into the project starting point. That way whenever you go to http://localhost:8000, usually index.html is assumed to be served. (Just like visiting http://localhost:8000/index.html). When you are using that method to run your project, the reference to style.css is just the way you were doing, which is:
<link rel="stylesheet" type="text/css" href="build/css/style.css">
By the way, this is also perfectly fine in that case, with an absolute path:
<link rel="stylesheet" type="text/css" href="/build/css/style.css">
Things will go different if you are using other mechanisms to serve static files like css, js. But the core principle is that simple: make sure files you want can be reached, and the relative path you are using really reveals the path relation between the reference point and the target referenced file.
My main doubt is the part of href.How can i avoid using the full link of the file as saved in my harddisk so that i dont need to change it while transferring through ftp.I also want to know how you can view your html files being developed that has been linked to different css files on your desktop web browser like chrome.
If your HTML file is stored in a directory, and your CSS files are stored, for example, in a css subdirectory, all you need to do is add
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
to the <head> tags of your HTML file, and you'll be all set.
If the file is in the same folder as your HTML file you will simply type the name of the file
<link rel="stylesheet" type="text/css" href="style.css" />
Let's say that your style.css file is in another folder called css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
By playing a "/" in front of your file name it is saying that it should look for the "css" folder starting from the root folder instead of the current location.
You can use relative paths. If the css stylesheet is in the same folder as the html use href="style.css". If it's in a folder that is in the same folder as the html use href="styles/style.css". If you need to go up a folder use href="../style.css".
I've been working on a project with a HTML and an external CSS file. The link worked fine at school when i was doing it on adobe dreamweaver on a mac, but i sent both files home via dropbox, and the css doesnt seem to link with the html file. I believe i've got the file paths and everything right, but just to make sure:
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
i also tried removing the "Desktop/" bit from the file directory, but it still didnt work. My Index file and Css file are both on my desktop. I am using windows. The same code worked at school, so i believe it might be something to do with with file location.
please help
Thanks in advance
This is how linking works,
Let's say your html file is in a folder named "xyz". Now when linking to css, the address is related to your html file's location. So if you mentioned
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
it would assume the css file is in the same folder as your html, while if you linked it as
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
it would assume there is a folder named Desktop inside the folder xyz, and your css file is probably stored in Desktop.
Now im assuming you've simply placed both your html and css on your desktop directly, this is not good practice as you're probably going to move these files back to school as well. Hence I'd recommend you to place both in a folder and then link to your css with
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
and dont forget to pay attention to capitalization, yes html is non case sensitive but when it comes to linking external files, capitalization does matter.
Your directory structure should look as follows:
Root Directory
|
|-page.html
|-Desktop
|-StyleSheet.css
If it does not you need to modify your directory structure or change the href attribute on the link tag
If it is in the same directory simply set the path to href="Stylesheet.css"
The problem is with your file location .
If you are using Dreamweaver or any other code editor, simply browse to the path of the file to insert it in link href attribute, rather than manually entering the path .