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.
Related
i cant connect stylesheet to my html file, i cant inport image from my pc by realtive path. I have seen lot of questions here and i tried all the suggestions but i didnt found a solution, im 100% sure my syntax is right. Its wierd because i can inport images from url. It seems like my pc have some problem with relative paths, or it may be some wierd setting in my VS code. Can i get some advise to solve this, what should i try.
Here is some example...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="templates/style.css">
</head>
<body>
</body>
</html>
i have tried all variations like href="style.css", href="./style.css"
Your code is valid, but you might be mistaken in the location of the files your linking to. That would result in an invalid url.
Have a look at a folder structure as below. You've got a project folder name project-example this folder contains the index.html and the folders templates and images.
If you want to link in your index.html to the files in those folders the src or href would have to be something like templates/style.css or images/image.png.
I am trying to import a css file in the same directory as my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
I believe I am correct in using ./ to go through my directory. I have also tried using ../
However, in my dev tools in chrome, I am getting this error:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Any help would be appreciated. Thanks!
It is definitely the link that's the error.
You will need to check your file path, is this project just simply on your desktop? Is it a ASP.NET app?
Depending on where/what project it is, you should be safe to use .. to traverse up one folder
It really depends how your directory folder is structured, but if you have your HTML and CSS files in the same folder, you can just use <link rel="stylesheet" href="/styles.css"> (note that there's no dot), then your html file will look in the root folder of your project, also make sure the name styles.css is the same as your css file
Since you put the html file and the css file in the same folder, there is no need to use ./ or ../ because this step is written only if the css file is in another folder next to the html file
open-source public files work best. So instead, go to https://gist.github.com and sign up if you haven't already, name the file (with extension, e.g. style.css), and paste your CSS3 code, click 'create secret gist', and click raw. copy the link and that will be your external CSS file.
-Good luck!
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!
I am trying to put an icon next to my page title. I have read quite a few articles and similar questions on the internet but i still can't see my little icon up there next to the page title. I literally don't know what is wrong with my code.
I have the following directories among other: data/public, data/files, public (which includes all my css files), views (which includes all my ejs files). Inside the /views folder i have a few folders and a few files that are responsible for my viewing experience while using the web app i am building. Now in the /views/includes directory i have a file named head.ejs which contains all my head code i will use in pretty much every other ejs file. so i just have the head.ejs file and i can include it in every ejs file i want. The head.ejs file looks like that:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="shortcut icon" href="/data/public/boxTitle.jpg" type="image/jpg" /> -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css">
I expected to see the icon up there but still haven't seen it. I have tried to move my favicon.ico image around in different directories and play a bit around with the paths. the best for me is for the image to be in the /data/public/ directory. while the head.ejs is in the /views/includes/ directory. The image is 16x16, black and white. Tried with a jpg image, too. I am probably failing really hard cause it's seems pretty easy and straight forward but... Any help is appreciated! I will delete the post if the answer is totally obvious and the post is worthless.
Assuming your icon is in your public folder inside an images folder.
If you have defined your public folder as you mentioned, with something like this:
app.use(express.static(path.join(__dirname, 'public')));
then you can easily display your icon this way:
<link rel="icon" href="/images/your-icon" type="image/x-icon" />
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!