I've run my css through a validator (nothing is wrong)
My header looks as following (with irrelevant pieces removed)
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400&display=swap" rel="Stylesheet">
<title>Projekter</title>
<link rel="Stylesheet" href="Stylesheet.css">
</head>
and my stylesheet is named Stylesheet.css in the following folder hierachy
What could possibly be wrong here?
Please do tell me if I'm missing giving some relevant information.
The stylesheet call path is invalid.
The index.html file is in the HTML folder and Stylesheet.css is outside the HTML folder.
Please correct it as follows.
<link rel="stylesheet" href="../Stylesheet.css">
Chrome DevTools makes it easier to determine the cause.
Related
How can I solve thymeleaf css not found error?
The bootstrap.min.css file is located in resources/templates/css/bootstrap.min.css.
The following sources were used to refer to this file.
<head>
<meta charset="UTF-8">
<link th:href="#{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</style>
</head>
The result rendered on the server is <link href="/css/bootstrap.min.css" rel="stylesheet">.
If you access the address
I get an error GET http://localhost:8080/css/bootstrap.min.css net::ERR_ABORTED 404.
How can I solve this problem?
Best Regards
Create a directory called static under resources/templates/ and move css directory into it. The css and js should be in a directory called static so that the framework recognises them. The path for the css file should look as follows:
resources/templates/static/css/bootstrap.min.css
Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>
I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">
This is the link: https://footballcoder.github.io/YearOfCode/projects/about.html (source code: https://github.com/FootballCoder/YearOfCode)
If you see in my repo, I have a folder called projects and in there I have my about.html, and a folder called css. I have a file in the css subfolder that is called about.css, which is the css for about.html. I don't know why the css isn't being used. Is it the way the file is being linked or some other error. The link from the HTML file is in the tags.
change this
<link rel="stylesheet" type="text/css" href="/projects/css/about.css">
to this
<link rel="stylesheet" type="text/css" href="./css/about.css">
I hope this article can help you
You refer to the link as such:
<link rel="stylesheet" type="text/css" href="/projects/css/about.css" />
See if the following edit (removing '/projects/') fixes the problem.
<link rel="stylesheet" type="text/css" href="css/about.css" />
This should work because it is linking the path starting at the serving html, aka about.html, not at the root of your site. Just tested it with Dev Tools in Chrome, and it looks like it works (and is super cool!)
Side note: if your fonts from Google aren't loading, move the custom CSS below those links in the head. I'm not sure if they are or not since I'm not familiar with them, but that will work if that is also an issue.
I have a Chromebook and I am using the app: HTML Viewer with this app: http://drive-html-viewer.pansy.at/
This is the HTML file: https://shiftedit.net/edit#162629/0B94fPcefbkHSXzJpNFc5cmlWMnc
CSS files: https://shiftedit.net/edit#162629/0B94fPcefbkHSVmhVb0M5d2hrSTg
https://shiftedit.net/edit#162629/0B94fPcefbkHSN2o3c1I3WTd4ZG8
and the page shows up fine in basic HTML format but when I try to apply a CSS style sheet it doesnt recognize it ? this is part of the code with the stylesheet link:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Scissors
</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="rps.css" />
</head>
<body>
help?
I was running into the same problem when opening an HTML file from within my Chromebook; the styles would not display. When I opened the same file from my PC, the styles would display just fine.
After a lot of searching I finally ran into this article that helped me figure it out. Basically, since the Chromebook files are in Google Drive, I needed to include a direct link to the file, even though my HTML and CSS files were stored in the same folder.
Did not work on Chromebook:
<link rel="stylesheet" href="style.css">
Worked on Chromebook:
<link rel="stylesheet" href="https://googledrive.com/host/put-the-fileID-here">
You can get a file's ID by right-clicking the file in Google Drive and selecting "Get Link". Copy everything that comes after "id=".
Never used HTML Viewer, but are you sure the path to those two css files are correct?
The solution is...
From a chromebook, open the Files App
Locate the index.html you wish to view
Double-click on the index.html file
The file will open in the Chrome browser
Copy all of the local address, except for "index.html"
Open/Edit index.html
Paste the local address into the "link" tag in the "head"
example:
link rel="stylesheet" type="text/css" href="externalfile:drive-6a0d36c37ed3c1d0c03bd5ca216484a83b9d68ae/root/CodedWebsite/style.css"
Hope this helps anyone in the future!