I have used the Sublime text editor to make a simple CSS file with an objective to make the heading red. Now the below code works perfectly fine
h1 {
color:red;
}
<html>
<head>
<link rel="stylesheet" href="st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
But if I replace the CSS file name from "st.css" to its original file path, it no longer works.
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
Is there any specific reason for this?
I tried refreshing, saving and even live reload but it simply doesn't work. Please explain
Everything looks fine to me. I would just double check that you have the full path correct with no typos or missing directories. I tried the same locally with the equivalent fully qualified path on my Windows machine and it worked fine.
Try to edit the backslashes of the path to normal slashes.
Another way to solve this problem is to have a look at this website because there is a nice example on it.
https://css-tricks.com/quick-reminder-about-file-paths/
If you have any more questions feel free to ask.
I hope that I could help you!
If you're using a server/localhost, You are not allowed to load local resources, that are NOT inside your main website folder, for example: if you have a folder named mywebsite which contains mywebsite/index.html, then once you click twice on index.html, You are allowed to access all files inside you computer, BUT if you run mywebsite in localhost you'are only allowed to access files inside mywebsite folder.
If not You probably made a typo in your absolute path, because your code is working fine in my device.
Seems like I figured it out myself.
I was sure that there couldn't be a typo since I right-clicked (holding shift) on my CSS file and copied its path. I think the problem was on how my browser sees the text.
For example, the below code which has a code path I copied as I mentioned works perfectly fine on Internet Explorer
<html>
<head>
<link rel="stylesheet" href="C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I saw the pathname on Internet Explorer's URL as
C:\Users\windows\Desktop\Python\Practise\Minutes.html
Now the same code didn't work for Mozilla Firefox which is my primary browser as I noticed the difference between the URL of Firefox and Explorer was of some random slashes at the start, like this
file:///C:/Users/windows/Desktop/Python/Practise/Minutes.html
Therefore I put the file:/// text on my original code as
<html>
<head>
<link rel="stylesheet" href="file:///C:\Users\windows\Desktop\Python\Practise\st.css" type="text/css">
<title>Minutes</title>
</head>
<body>
<h1>A</h1>
</body>
</html>
I even interchanged the backward and forward slashes and it still worked !
So I can conclude that my problem was a browser-specific error and I am really grateful to the community for their quick responses.
Related
I have a local HTML file which has a link to a local CSS file. Both files are on machine A. The HTML is in one location but the CSS is stored elsewhere on machine A. The HTML file is a report generated by a program running on machine A. The user reads the HTML report on machine A.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My very first html document</title>
<link rel="stylesheet" type="text/css" href="C:\tmp\folder1\css\mystyle.css" />
</head>
<body>
<div class="myclass" >Hello World!</div>
</body>
</html>
CSS mystyle.css
.myclass {
background-color: yellow;
}
The folder structure is like so:
C:
+
+->tmp
+
+>folder1
| +
| +>css
| +
| +>mystyle.css
+>folder2
+
+>index.html
In Firefox the CSS is not applied. The results from Firefox, Chrome, IE, Edge (clockwise).
Version of Firefox: 63.0.3 (64bit)
What I have tried
Relative path to the CSS (href="../folder1/css/mystyle.css" ). This works.
Changed from forward slash to backward slash, escaped slashes. This did not work.
I would prefer the absolute path for the CSS.
I would prefer not to copy the CSS.
Questions
Can someone explain why Firefox does not apply the CSS?
What is a quick fix for this problem?
What is the right-thing-to-do?
Prepend file:// to the href of your css link and it will work. I just tried it myself using your folder structure. It originally didn't work in Firefox as reported but it did work in Chrome. Prepending file:// allows it to work on both.
<link rel="stylesheet" type="text/css" href="file://C:/tmp/folder1/css/mystyle.css" />
Firefox has no access to your filesystem for obvious security reason (see this kb post for more infos ) .
There are many possible workaround if you'd like to keep your css file on a different location, the most popular one being webpack or any other build system. Basically every modern front end development stack uses it. It is a node.js tool that will gather all your static assets using preconfigured path and "bundle them" in a local build.
If it is just a single css file for a single use-case, just use a relative path (or a file:/// prefixed path). The best solution here is obviously the quickest and easiest.
So I'm making a website for the first time. I've tried to put some images on it to test via Cyberduck. However, it's not working.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Test site</title>
</head>
<body>
<h1>Test</h1>
<p>Test</p>
<img src=“../img/test.png” />
<img src=“../img/tenor.gif”></img>
</body>
</html>
My images are stored in the img folder:
printscreen directory
I've already checked for case-insensiveness.
I've put the images in the img folder and I can access the images via the path. However, I don't see them (in Chrome) or I see that they are broken(in Safari).
Anyone know how to solve this?
This would have been a comment.
Try running a server in the projects directory.
But possible issues might include:
Incorrect file extention.
Incorrect path. Instead of ".../" use "/".
The answer to my question came from keja. Thanks a lot!
I apparently used the wrong quotes. Images are working now, so problem solved!
No matter how I link my stylesheet, the resulting page remains unstyled.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
test test test
</body>
</html>
CSS:
#charset "UTF-8";
body {
background-color: #f25f29;
}
Both files are located in the same folder, which is test inside the xampp htdocs folder. Another website with stylesheet, which I have taken from a book in another subfolder inside htdocs is just fine. (I tried to figure out the mistake in my own page based on the working one, but I couldn't find it)
I already tried the following things:
different paths
style.css
./style.css
/opt/lampp/htdocs/test/style.css
file://opt/lampp/htdocs/test/style.css
/test/style.css (since I guessed that the localhost takes htdocs as root directory)
file://test/style.css
matching the charset specifier in CSS and HTML files (all uppercase)
using /> to close the link instead of >
inserting a space between linkname and closing bracket
sudo chmod 777 * inside the test folder (changed it back to 644)
restarting xampp
omitting the type="text/css" specification
quadruple-checking the name of the stylesheet and its path
I've had it never enclosed in <style> tags
Also always used the straight quotation signs instead of the "italic" ones
The version that I have given above is the one that works in the other case.
Edit: Clearing the cache the cache fixed it, as suggested in the comments.
When CSS is not updating on your website, it could be that the website has an older version of the stylesheet in the cache. Clearing this will make it fetch the updated version.
To find out if this is the problem:
Right click on page and inspect (element)
Navigate to Sources
Navigate to your Stylesheet
check if this is the updated version.
If your stylesheet is not up to date, clear cache and check if it worked.
For example:
Clear cache in Google Chrome
Clear cache in Internet Explorer
Clear cache in Mozilla Firefox
I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/