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
Related
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.
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.
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
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 at the last of my wits here. I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me.
Here is the top section of my HTML, linking to my CSS file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Sample Page</title>
</head>
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account.
Just to clear things up a bit, I've already made sure the following are not the reasons for my issues:
My CSS code worked just fine when it was in the HTML within the style
tags. It only stopped working once I put it into its own .css file.
There are no <style> tags on my .css file.
The rest of my HTML is correctly formatted. I have the </html> tag and the <body> tags.
I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. I've even tried running them as an Administrator.
I've checked to confirm that my browsers are not set to Quirks Mode.
I've tried multiple DOCTYPE headers, none have shown any signs of working.
The .css name is correct, and the file location is correct. Both the index.html and the style.css are in the same folder.
I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works.
I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file.
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css. If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text.
Here is a sample of a style.css I've tried:
body
{
background-color: yellow;
}
Even with the CSS as simple as this, it still won't work.
Please help.
EDIT: http://i.imgur.com/SgoFkvw.png
Read my post, you guys. They're in the same folder. The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves.
Jozef Dúc wrote in the comments (1, 2):
Open css file in some editor for example Notepad++ and change encoding of file to UTF-8
Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file. Hope it helps :)
This is what solved it for me.
According to your screenshot
it looks like you have bad encoding in file.
So first add
<meta charset="utf-8">
to your HTML.
Then you must change encoding in CSS files. Open the file in some editor (I recommended Notepad++). In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8. Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file.
i had the same issue and this is what worked for me. i realized the .html and .css files where all in one single folder that's why it wasn't working. to solve this,
open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. Finally, place the .css file in the style folder and run your site again.
this worked for me. hope it works for you
Try adding this line <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
1. Ensure that CSS is enabled in your browser.
1.1 Firefox & Chrome: I recommend using Chris Pederick's Web Developer Toolbar, it is a CSS menu (third from left if you have a newer version where the text labels got KOed).
1.2 Safari: ensure the Develop menu is visible (Edit-->Preferences-->Advanced) and then ensure that Disable Styles is not checked.
1.3 Opera (Real Opera, 12.5 and earlier): Tools-->Preferences-->Advanced [tab]-->Content-->"Style Options" [button]-->Presentation Mode [tab] and ensure that "Page Style Sheet" is checked.
1.4 Internet Explorer: Go to Tools-->Options and ensure that under the "Security" tab that the zone (either Local Intranet (if loading the page from your hard drive) or Internet (if you're uploading to a server and then loading it in a browser) are set to Medium-High.
2. Ensure that your HTML and CSS files do not have a BOM (Byte Order Mark) which is created by Notepad and other Microsoft text editors. You can disable the BOM by using Notepad++ or SuperEdi in the Save As... dialog, you will need to do so for both. NEVER USE MICROSOFT TEXT EDITING TOOLS FOR WEBSITES!
3. Running a local server? Check either the Apache access logs or the Developer Network tab to ensure the style.css file isn't coming up as 404.
My link tags work also without the / at the end of the tag. you can try that.
and you can get to element ispect and that to console. maybe the console can tell you what's wrong.