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.
Related
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
I have created a few html-pages and one CSS-page inside a folder (Webservice). At first I just used to reference to my CSS-page like this because they were in the same folder.
<link rel="stylesheet" href="style.css">
Then I wanted to make it look more clean so I created separate folders for html and CSS within the already existing folder (Webservice). The new folders were named html and CSS. If I do it like down below it works, but I need to be able to access the files on other computers/devices as well.
<link rel="stylesheet" href="file:///Users/home/Desktop/Webservice/css/style.css">
It does not work to do like this:
<link rel="stylesheet" href="css/style.css">
How do I solve this?
You will have to use ../ inside the html folder to go to the parent folder.
And then you can access the css folder so your link will look like this:
<link rel="stylesheet" href="../css/style.css">
By using a relative path, it will work on your other computer.
You have to set the relative path to your CSS style from HTML file.
To view more https://desktop.arcgis.com/en/arcmap/10.3/tools/supplement/pathnames-explained-absolute-relative-unc-and-url.htm
I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
I was linking my external css file to the header of my page, like this
<head>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
But the styling wasn't working until I added a dot to the path, like this
<head>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</head>
I have tried it in Firefox, Chrome, Mozilla and Opera and everywhere was the same result.
How can this be possible? Since in all the sites I have searched, they indicate that to go up to the root folder you just need to type "/css/style.css" without a dot.
Thank you in advance for your time.
It always depends in which folder you css file is. if you have a structure like this:
-index.html
-css (folder)
--style.css
than you can write css/style.css, but if it is like this
-pages (folder)
--index.html
-css (folder)
--style.css
than you have to add a ./css/style.css because "./" means to get a folder back bevore entering the css folder
The . mean's
one folder back/[path]
normaly u write ../[path]
EDIT:
i dont know how your Folder architektur look's like, and if you using JQuery or Javascript for loadin's that's important informations..
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" />