I'm having trouble referencing an external css file in my file manager. My html page is in a folder called "homepage" and my css file is in a folder called "library".
Currently, I have
<link rel="stylesheet" href="library/homepagecss.css">
but that won't reference the css file.
My only option is to have the homepage html file and css file in the same folder but i'd like to have them separated for organization.
Anyone know how to do this in Domain's file manager?
You should either write an absolute path there, like
<link rel="stylesheet" href="C:/User/Documents/public_html/library/homepagecss.css">
(I am assuming your path to the current directory)
BUt if I understood well your both folders library and homepage are in the same folder called public_html you can try this one
<link rel="stylesheet" href="../library/homepagecss.css">
By entering .. you go up in the directory tree, you go up at the parent directory, and you need to go up at public_html cause there is where you library folder is located.
If the homepage of your site is at example.com, and your homepage is in a “homepage” folder, then the href you currently have is going to be looking for a file at example.com/homepage/public_html/library/homepagecss.css. And that’s obviously not correct.
You have two options to fix it.
Use an absolute path to the CSS file: href="http://example.com/library/homepage.css"
Use the HTML <base> tag to set your base path as your homepage in the <head> of your site, and then specify the relative URL in the link to your stylesheet: href="/library/homepagecss.css"
Related
I am working on programming a very basic show streaming site for a project, and I have multiple folders. Folders include:
HTML
CSS
Shows
Inside of the "Shows" folder, I have a subfolder called "Testshow".
How do I link a CSS file from the CSS folder into an html file in the Testshow folder?
I have tried
<link rel="stylesheet" href="/css/style.css">
and some other things, but nothing has been working.
try something like this from your html file ../css/style.css
../ it means one folder up
../../ it means two folder up
Thank you #Konstantin Savusia !
I used ../ before asking and it didn't work, but what you recommended did work!
I just added ../../ to the beggining.
Not sure why the external file not working?
It works ONLY if I created it in the same folder with my HTML, but when I created the CSS with its own folder it's not working. I'm asking because it works for other classmates but me.
Try giving the css path as
link rel="stylesheet" type="text/css" href="../css/styles.css">
To get to the css folder you will need to go back one folder level which can be done with ../.
In this case you could change your href to href="../css/styles.css".
Or
Because css is at the root of your project you could use href="/css/styles.css".
Or
You should take your HTML files out of the /image folder and into the root of your project in HTML - Personal Site/ and then you won't have to change the href property
I have a website with a multiple pages some of which are in a seperate directory. However, I can't seem to link pages in one directory to a css file in a separate directory.
I have tried the pasting entire directory and css/main.css.
//Here is the folder/directory structure of my project
home.html
css
--main.css
lines
--M51.html
--M50.html
--M53.html
Here is the HTML code I use to reference to the css in html file M51.html or any file in lines folder/directory:
< link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
When testing the html page in lines folder(M51 or M52 or M53), I see css is not applied and error "cannot resolve file css/main.css". How can I resolve this error?
It works fine on home.html but not on those inside the "lines" directory.
Since you have Css files stored in a different directory. Make sure you use relative file path to include css in the HTML:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
A relative file path points to a file relative to the current page.
Best Practice
It is best practice to use relative file paths (if
possible).
When using relative file paths, your web pages will not be bound to
your current base URL. All links will work on your own computer
(localhost) as well as on your current public domain and your future
public domains.
Copying an answer from the comments because it is the right answer:
Reference the file using this:
../css/main.css
for files in the "lines" directory (map). The two dots go up one level, where the "css" directory(map) is located relative to the current folder. Use the Relative Path for the external CSS file.
I have my website project in /home/username/project with index.html in it. index.html has to contain the following .css file /home/username/project/css/application.css, so I try to load it like this:
<link rel="stylesheet" href="/css/application.css"/>
I run index.html page on my localhost and see no changes. Browser developer tools show me that style sheet doesn't exist in /home/username/css/application.css. Of course, because it is in the project folder, why does host trying to find it there?
You need to specify that the folder containing the css file in nested inside the folder containing your html file by putting a . before the path.
So your line becomes:
<link rel="stylesheet" href="./css/application.css"/>
For additional info, if you want to go the folder containing the folder of your html file, you have to put ...
So, for example, if your css file was in /home/username/css/application.css, your line becomes:
<link rel="stylesheet" href="../css/application.css"/>
I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?