CSS file not linking in sub-directory - html

Here's my directory structure:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In my header, I link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
That works for index.php, because it's the correct path (root/includes/css.css).
But for doc1.php, it's not the right path. (root/docs/includes/css.css).
How do I fix this while keeping one header.php file with that line of code in it? Is there a way to force the path to start in the root directory?

Use an absolute instead of a relative path.
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />

You can use the base tag to tell the browser where all links are relative to (including s and s), you will need to make sure all your links are relative to that, but it will allow you to use the same relative path from any document.
Or, you could use an absolute path.

Or this will remove all doubt for any page, at any level:
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/includes/css.css" />

Related

Cannot link CSS to HTML

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

Spring add CSS to different pages

I have 2 pages:
http://local.host:8080/test/login
http://local.host:8080/test/admin/manage
Added css in login.jsp using c:url:
<c:url value="css/style.css"/>
When I open 1st link - everything works well. I tried to add the same style.css file to manage.jsp (2nd URL), but when I open 2nd link - css is not included. In Page Source I have:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
How to define to take style.css from the root of URL (http://local.host:8080/test) ?
I think it is, because the specified path is relative to the current page (login is at an other level of path-nesting* than admin/manage).
A trivial but bad solution would be adding ../ for the css of admin/manage. But this soultion has the drawback, that you always need to adjust the ../ when you change the level of path-nesting* for an page.
To overcome this problem, make the path in the c:url-tag start with an /! (this make the tag aware that the url is context relative (relative to http://local.host:8080/test/), and the tag will automatically addhttp://local.host:8080/test` in front.
<c:url value="/css/style.css"/>
will be rendered to : http://local.host:8080/test/css/style.css
For the link use this way
<c:url value="/css/style.css" var="cssUrl"/>
<link rel="stylesheet" type="text/css" href="${cssUrl}"/>
*I do not know the correct term for "path nesting" at the moment - fell free to change it
Order of attribute might be the problem. Correct the order
<link href="css/style.css" rel="stylesheet" type="text/css" />

Why does my HTML not link with my CSS?

I am working on my website, and my HTML isn't linking to my CSS. Can somebody please shed some light on this issue?
This is the snippet from my code.
<link href="css/style2.css" rel="stylesheet" type="text/css">
My file directory goes like this.
/root
/css
style.css
style2.css
/html
index.html
webconfig.html
/Images
Is this correct?
Your current href is a relative path, rooted from where ever the HTML file is.
You can either use a correct, relative path...
<link href="../css/style2.css" rel="stylesheet" type="text/css">
Or you can use an absolute (domain-rooted) path...
<link href="/css/style2.css" rel="stylesheet" type="text/css">
... assuming your website is deployed at the root of your domain.
The link you have is relative, so it starts looking in the same folder as your html. You could do an absolute path to the css with /css/style2.css or use a relative path ../css/style2.css
Use relative URL <link href="../css/style2.css" rel="stylesheet" type="text/css">
The url css/style2.css should be relative to the HTML file(the file that contains code <link href="css/style2.css" rel="stylesheet" type="text/css">) .
.. in above relative URL indicates go one folder back, and then to the css folder - and in that css folder use style2.css file.
Similarly ../../ , means go two folders back and so on.

How do I specify relative paths for content such as CSS?

When I am linking to any file I have to specify the absolute path looking like this
<link rel="stylesheet" type="text/css"
href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" />
I would like to narrow it down to
<link rel="stylesheet" type="text/css" href="/css/stylemainpage.css" />
I'm not sure how to. I tried placing stylemainpage.css inside the page being viewed, but it didn't work.
The path depends on where you have placed your HTML files
HTML
index.html
CSS
style.css
CSS path in your HTML file would be - <link href="../CSS/style.css" rel="stylesheet"/>
Edit: in your case the path should be -
<link href="../css/stylemainpage.css" rel="stylesheet" type="text/css" />
Try using <link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/> (without the leading slash before css)
<link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/>
put your css into css folder
Keep the CSS file and the HTML pgae in the same folder, then just include the CSS filename. If you want to keep the CSS file in some other folder under the same server root and still want to use relative path names, use .. and /. Use .. to move up a level, and / to move down a level.

Specify a Root Path of your HTML directory for script links?

I'm writing a template for dreamweaver, and don't want to change the scripts for subfolder pages.
Is there a way to make the path relative to the root directory?
for example:
<link type="text/css" rel="stylesheet" href="**root**/style.css" />
Instead of **root** above, I want a default path there. Is there any way to do anything like this?
To be relative to the root directory, just start the URI with a /
<link type="text/css" rel="stylesheet" href="/style.css" />
<script src="/script.js" type="text/javascript"></script>
I recommend using the HTML <base> element:
<head>
<base href="http://www.example.com/default/">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
In this example, the stylesheet is located in http://www.example.com/default/style.css, the script in http://www.example.com/default/script.js. The advantage of <base> over / is that it is more flexible. Your whole website can be located in a subdirectory of a domain, and you can easily alter the default directory of your website.
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
Just start it with a slash? This means root. As long as you're testing on a web server (e.g. localhost) and not a file system (e.g. C:) then that should be all you need to do.
This is oddly confusing to me. I know it shouldn't be. To check my understanding, I'd like to use a family relations model to compare. Assuming "You" is the current webpage, is the following correct?
<img src="picture.jpg"> In your folder with you, like a sibling
<img src="images/picture.jpg"> In your child's folder, under you
<img src="../picture.jpg"> In your parent's folder, above you
<img src="/images/picture.jpg"> In your cousin's folder
So, up to parent, over to sibling, down to their child = your cousin, named "images".
As Alexander Jank mentioned <base href="http://www.example.com/default/"> is great. When using sub-domains e.g. default.example.com base works great, because the JS and CSS loads from the said sub-domain and is accessible to both default.example.com and example.com/default
When using the root path, and your JS and CSS files are located in example.com/css, or example.com/js, then the subdomain has no access and the root of the subdomain is not accessible, except using the base.
Use two periods before /, example:
../style.css
You can use ResolveUrl
<link type="text/css" rel="stylesheet" href="<%=Page.ResolveUrl("~/Content/table-sorter.css")%>" />