I am just beginning HTML and I wanted to know how to use root directory in HTML?
I have a css and js folder in the root directory and I linked it(using relative URL) for the index.html in that directory. But now I have a subdirectory called foo along with the css and js sub-directory's. Now in the foo folder I cannot use relative URL because the css folder is not in that directory.
Do I have to use absolute URL, or is there a way to use /code_for_main_dir/css
Path starting with / means root directory.
<link rel="stylesheet" type="text/css" href="/css/mytheme.css">
More info:
https://www.w3schools.com/html/html_filepaths.asp
As #thesilkworm said,
using ..goes one directory up.
But, using / goes to the root of that web.
so, /css instead of css
Related
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'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"
I use PhpStorm 9 and I have project structure similar to this:
src/
elements/
element-alfa/
element-alfa.html
element-alfa.scss
templates/
application.html
index.html
I use Polymer so I have to import the elements when I use them. I also use AngularJS, which direct the app after load to application.html, but in fact paths are like from the index.html file.
<link rel="import" href="elements/element-alfa/element-alfa.html">
I have set the src/ directory as RESOURCES ROOT so it does not tinged the background color under href path but if I use auto hint (CTRL + 2x SPACE), it returns the path relative to the file application.html, not relative to the index.html (or my resources root) as I wanted to.
How to achieve it?
Currently, the only way to do it is to type/autocomplete each folder one by one sequentially: first elements, then element-alfa, and then autocomplete filename. I created a feature request about this: https://youtrack.jetbrains.com/issue/WEB-30888
I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.