i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">
Related
I have separated some HTML files other than index.html and CSS too. It is working well in VS code but on creating Git Hub pages only index.html file is running.
Here is my repository:- https://github.com/shashi-singh18/BlogWritingSite
please help!
Change you links to the following structure
src='./css/utils.css'
Your current paths force your index.html to search for a sub-directory "BlogWritingSite" which does not exist at that reference level.
I saw your repository and noticed some errors when linking your css file in index.html
<link rel="stylesheet" href="/BlogWritingSite/css/utils.css">
<link rel="stylesheet" href="/BlogWritingSite/css/style.css">
<link rel="stylesheet" href="/BlogWritingSite/css/mobile.css">
change for
<link rel="stylesheet" href="./css/utils.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/mobile.css">
and
change the name of your css folder to lowercase letters
after
CSS
fixer
css
I think the error is in the address of the CSS files
Here, you should have given the address of each CSS file, relative to the index.html file and not the project directory as a whole
Try changing these link tags to this and tell me if it works.
<link rel="stylesheet" href="./CSS/utils.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/mobile.css">
I am using Windows (7) trying to create an offline html page that should link to a separate CSS file located in same directory. I tried to use
<link rel="stylesheet" type="text/css" href="/styles.css" />
but no luck.
And I also want to import another css file named styles2.css within style.css. Didn't check yet but putting #import "style2.css"; on style.css may be not work as well. I can use absolute links like C:\Users\ELITEBOOK\Desktop\offline\style.css but it won't work if I move the folder anywhere else from Desktop. Any help? I mean, any code that calls/adds the link of the folder?
Use <link rel="stylesheet" type="text/css" href="./styles.css" /> instead. Note: href="/styles.css" changed to href="./styles.css", which is current directory of your script.
While the accepted answer is not wrong it's over-complicate things.
If your file is https://www.google.com/b/bananacream/bananas/index.html
<link rel="stylesheet" href="/style.css">
Will try to get https://www.google.com/style.css as the last / tells the file is located in the "root" folder.
<link rel="stylesheet" href="style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.
<link rel="stylesheet" href="./style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.
<link rel="stylesheet" href="../style.css">
Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.
<link rel="stylesheet" href="../../style.css">
Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.
A general complete answer:
to address through existing folder, use:
<link rel="stylesheet" href="./style.css">
to address through parent folder, use:
<link rel="stylesheet" href="../style.css">
to address through the internet( CDN ) use:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap-theme.min.css"
>
to address through your hard drive use:
<link rel="stylesheet" href='file:///C:/mystyles.css'>
try this one, it worked for me.
<link rel="stylesheet" href="./main.css">
I've got the following folder hierarchy in my web application.
I'm using the following relative path to access my CSS files but the layout doesn't detect the CSS. There are two layouts but I'm calling the CSS from the layout file which resides inside the views folder.
This is the path I used to access the CSS file.
<link rel="stylesheet" type="text/css" href="../style/style.css">
I used this path too but no luck.
<link rel="stylesheet" type="text/css" href="../../style/style.css">
Please help!
Check whether you are not using multiple CSS files. And if you are using Chrome/FF you can check whether your CSS is called or not with tools like firebug.
You can see the full path with these tools.
if your layout file loading in another file try that files path or simply use path like this
<head>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
</head>
your real layout can be work like this too
<head>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
You can use this:
<link type="text/css" href="style/style.css" rel="stylesheet" />
The second Path should be correct.
I also tried it in Visual Studio 2010 with the same folders as you and VS gives me the same Path (Second one) as you said.
Another Question, do you put the link into the header of the HTML page ?
<head>
<link href="../../style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
When I am linking to any file I have to specify the absolute path looking like this
<link rel="stylesheet" type="text/css"
href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" />
I would like to narrow it down to
<link rel="stylesheet" type="text/css" href="/css/stylemainpage.css" />
I'm not sure how to. I tried placing stylemainpage.css inside the page being viewed, but it didn't work.
The path depends on where you have placed your HTML files
HTML
index.html
CSS
style.css
CSS path in your HTML file would be - <link href="../CSS/style.css" rel="stylesheet"/>
Edit: in your case the path should be -
<link href="../css/stylemainpage.css" rel="stylesheet" type="text/css" />
Try using <link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/> (without the leading slash before css)
<link rel="stylesheet" type="text/css" href="css/stylemainpage.css"/>
put your css into css folder
Keep the CSS file and the HTML pgae in the same folder, then just include the CSS filename. If you want to keep the CSS file in some other folder under the same server root and still want to use relative path names, use .. and /. Use .. to move up a level, and / to move down a level.
On my web page I have the following line in the <head> element:
<link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
When I go to view that page in Firefox 11.0, it is obvious that the main.css is not being loaded. If I go to view page source, I see the <link> element (above) in the HTML, but when I click it I get the following error:
Firefox doesn't know how to open this address, because the protocol (c) isn't associated with any program.
How do I fix this?
try:
<link type="text/css" href="file:///C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
might work
Edit: as per the other answers, this is when you want to use a css file on your local machine, if the website will be hosted then you'll need to use a relative path.
<link type="text/css" href="images/css/12.02/main.css" rel="stylesheet" />
The above assumes that your html file with the link in is located in your "app1" folder.
Martyn
you need to insert an url/uri => file:///C:/myApps/app1/images/css/12.02/main.css
Hi you cas change your css path
<link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" />
into
xxx.css replace into correct path
<link type="text/css" href="xxx.css" rel="stylesheet" />