css file won't load when opening my website - html

i tested it locally and it's worked but when i upload it to my web host, some of the css code is not fully loaded, only some of the code inside of it are loaded. what happen pls i need help. i already checked the path.
thank you :)
this is from the host
this is from the local file
<html lang="id">
<head>
<title>Weebs Desu! official discord website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />```

You need to provide more data to give us some clue, but here is a thing.
Maybe because the version of your css is not updated in the hosting yet. You already change your css code but the result still same as before. The solution for this is you can add some v?=1.10 behind style.css.
So the result will be style.css?v=1.10, so the browser wont load the older version of css.
The number ?v=1.01 can be anynumber as long as greater than before (It works like patch).

If it's working locally but not on your web host, your style.css filename casing might not be matching what you have in your <link> tag.
For example <link rel="stylesheet" href="style.css" /> should mean that your filename casing should also be style.css. Not Style.css.
Also hard to debug without a live example provided btw!

Related

Why doesn't my css file properly link to my html file?

So I've been creating a project on my localhost server for the first time using wamp (I've only coded html/css/js in repl.it before this) and for some reason, my css will not
stay on my page. When I try changing styles using my CSS file, it shows up when I refresh, but then very quickly disappears. The following pictures represent this (NOTE: I had to record and slow down the refresh just to see that it did change):
this appears right after refreshing
milliseconds later, the CSS no longer does anything
The following code is the link to the css in my html file (have some other script tags in there as well):
<html>
<head>
<title>Home Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap-icons.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="/PHP-Login-System/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
An image of directory tree (trying to link style.css with index.php):
directory tree
As far as I know, since my styling does show up for a brief moment, I don't think the error could be in my linking between the files, but I could be wrong. Any comments are appreciated.
Everything looks good to me, I think the problem is coming from wamp server, because like you said, your css styles is showing up and disappearing.
My advice is:
Uninstall wamp total , download a fresh copy from the internet.
Restart your computer, then reinstall the new copy you downloaded

I have no idea why my css file isn't updating on my local server?

My css file just isn't being updated on my local server but I know that its connected because it still has the background colors i assigned before but even if i change the background colors they stay the same! I have restarted everything and tried everything I don't know whats going on.
Heres my header links
<meta charset="utf-8">
<title>PHP Test Stuff</title>
<meta name="description" content="PHP test stuff">
<meta name="author" content="Cosmichero">
<link href="css/styles.css" rel="stylesheet">
</head>
Also my html and php updates fine its just this file its like its saved and I can't edit it. I feel like I'm just missing something stupid though.

File won't show in folder, but will show in root directory?

I got an empty website up and running online. Basic html5 page with a style link and a script link. It looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taco Bell at midnight</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
The src's are accurate, I have a folder in the same directory as the html page with the name css and js. When I try to visit them, it shows them as blank. However, when I drag the files out to the same directory as the parent, and update the href, it shows them with the content. Does anyone have an idea as to why this is happening?
It seems relevant to add I just purchased the domain today from GoDaddy, and am using x10hosting for free hosting.
UPDATE: The styles.css still appears in my home directory (in chrome, not cpanel) after being moved, and ctrl+f5'ing, and it now also appears in the folder css/styles.css as well???
UPDATE2: Now it appears as though the files are just updating really slowly? I see the changes in codeanywhere/cpanel immediately, but chrome takes like half an hour to get the changes, regardless of clearing my history/cache and ctrl+f5'ing.
x10hosting (free version, I haven't tested paid version) cache is really bad, this seems to be a server issue, sometimes it keeps showing files that you deleted hours ago, sometimes it won't show files that didn't exist beforem, you might need to wait for hours.

Adding a theme to MVC page, can't find css file

Its been a little while by now, that I have been trying to understand MVC. I do understand the basics now and I also noticed, themes or css files can be added to a MVC site. When I try to do this, it seems my CSS file is not being found. This is the head of my _Layout.cshtml code:
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>#ViewBag.Title - Bierownie</title>
<link href="#Url.Content("~/Content/Earthlingtwo/style.css")"
rel="stylesheet" type="text/css" />
</head>
I am not really sure what I should put at the link tag. I noticed that in the other (standard auto-generated(Razor)) _Layout.cshtml file, something like this was being used:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
But it seemed that the code wouldn't understand if I put that same bit of code in the Layout's head, from which I want to use. I also tried to search on the web and I think it had something to do with the config file, although I'm not sure. A red curve would appear beneath Styles and Scripts.
If anyone could tell me how I simply could link a css file in a newly created layout file, I would be able to go further with my MVC site.
I am also not so sure if this question has already been asked and/or solved, so please let me know, as I couldn't find any answers.
As you can see in this picture:
There's a config file which will break the theme. Someone else noticed it and it did cause a problem.
You can just Drag&Drop css file from solution explorer to your layout page.
Bundle uses better. Try this:
ASP.NET - Using Bundle and Minification in ASP.NET MVC 4 and ASP.NET Web Forms 4.5
In your question, the path to style is noted as Content/Earthlingtwo/style.css, where in your graphic it's Content/Earthlingtwo/images/style.css. In the Earthlingtwo folder, is a site.css file Content/Earthlingtwo/Site.css
You need to correct your href to the correct path
<link href="#Url.Content("~/Content/Earthlingtwo/images/style.css")"
rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Content/Earthlingtwo/Site.css")"
rel="stylesheet" type="text/css" />
depending on which is the correct file.

Linking to a CSS stylesheet

I'm kind of a newbie to html and definitely to CSS. I'm learning from the book Foundation Website Creation with CSS, XHTML, and JavaScript, which I understand is old at the time of this question, but still hoping I can help many. Here is my markup:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="C:\Users\Kevin Turner\Desktop\html\indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Why isn't my stylesheet linking? Am I allowed to make this link? What should I do? I believe it's working in Chrome, but not in IE or Firefox, perhaps you could help me understand this also.
Thanks,
Kevin
Don't use C:\Users\Kevin Turner\Desktop\html\indexcss.css. This is not a correct URL. Usually you'd use a relative URL path. If your the file including the css is in the same directory, just write the filename.
This should work if the file is in the same directory (folder) as your html-file:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
To explain what a relative URL path is, imagine you've got a folder structure like this:
--- html/
----- index.html
----- css/
------- maincss.css
and you want to include the maincss.css-file in your index.html. Then you'd do
<link rel="stylesheet" type="text/css" href="css/maincss.css" />. Because maincss.css is in the css/ directory (folder), which is relative to the directory you're in (html/).
You can use file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css
Source. But ONLY if the css-file is located on the computer that you are loading the page on!
So. if the CSS-file is in the same directory as the file including it (probably index.html), your code would be:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="indexcss.css" rel="stylesheet" type="text/css"/>
</head>
And the other, with the file:/// URI and the file is located on the computer loading the html-page, would look like
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Welcome to Papa Pepperoncini's</title>
<link href="file:///c:/Users/Kevin%20Turner/Desktop/html/indexcss.css" rel="stylesheet" type="text/css"/>
</head>
Standard CSS link declaration goes something like this:
<head>
<link rel = "stylesheet" type = "text/css" href = "cssdoc.css">
</head
There is probably something wrong with the path you entered. In the future, consider having both the HTML doc that you're editing. and the CSS document on desktop(or just in the same folder). that way you don't have to type in the full path every time (assuming you're just using a simple Notepad-like editor)
Before the your local URL type file:///
You shouldn't link to a local file because on your live website this won't work. Even if your filesystem is set up the same way, the HTTP server probably won't serve it. It also depends on how your HTML is being served locally (by a server or just with files).
Anyway, you should link to the CSS file relative to the html file or preferably the document root (the folder that is serving your website files). If you can figure out your document root, you could use:
<link href="/indexcss.css">
...assuming that your document root is at something like
C:\Users\Kevin Turner\Desktop\html\
If your html file (with the <head>) is in the same folder as indexcss.css, you can just use
<link href="indexcss.css">
Make sure that you understand the document root and relative/absolute paths.
As your file is stored locally, make sure you use the file:/// URI scheme:
<link rel="stylesheet" type="text/css" href="file:///C:\Users\Kevin Turner\Desktop\html\indexcss.css" />
Still not working?
Some (or most?) browsers block access to your local file system, even when the webpage itself runs locally. This is a security measure to prevent webpages from accessing and modifying your local files.
Chrome, for instance, will return an error saying something like Not allowed to load local resource. To fix this on Windows, you have to launch Chrome with the --allow-file-access-from-files flag. Simply close Chrome, right click and modify the shortcut, add the flag at the end of the shortcut target. So your target would be something like this: C:\path\to\chrome\chrome.exe --allow-file-access-from-files. This will allow Chrome to access your local stylesheets.