giving a css path to html but it is not working - html

<link rel="stylesheet" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" media="screen" >
tried all of them but it's not working

try using a different name for the stylesheet rather than 'index.css' go for 'style.css' as everybody does.
Make Sure the CSS File is located in the same directory as the index.html and change the reference link to
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
or
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />

Check the path to your file you can try,
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
This should work if your file is in the same directory.

The path mentioned in the above example does not have a full URL or relative path that begins with "/".
This makes the browser think that the css file is at the same level as that of the html file. Therefore, it may fail to fetch the file correctly.
Updating the path of the css file to either a full URL or to a relative path will solve the problem.
Example:
Suppose that the website is organized into the following folder structure:
/index.html
/css/index.css
/css/main.css
/js/header.js
/js/footer.js
...
/images/hero.jpg
/images/logo.png
...
The call to the css file will work if the link is defined like this, in index.html:
<link rel="stylesheet" href="/css/index.css" >

Related

CSS style sheet not found

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">

nothing is linking with html in hosting

My index.html file is in the public_html directory. All css files/ image files are in a css directory, and images directory respectively.
I have been over and over my code but the index is not linking with anything in hosting.
`
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="main.css"> // ***
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-icon.css">`
*** I moved the main.css file directly into public_html to see if it would work and it does. I can only assume that I have made a mistake in my path.
BTW I have added a / to the css path in href. I don't want to move everything into the public_html folder, which I am taking to be the root
Many thanks
This might be redundant but one possible workaround is to use ./ everywhere. Eg.
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<link rel="stylesheet" href="./main.css"> // ***
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/font-icon.css">
It should work.
Assuming the css folder and main.css are the siblings of the HTML file in which this code is inserted .

Moving the file structure for CSS in HTML

I have a index.html file which has this file structure: fl/contact/thanks/index.html
My CSS folder has this file structure: fl/css/style.css
How can i target the style.css file so it affects the index.html file with the current file structure?
This is what it's currently set to:
<link rel="stylesheet" type="text/css" href="css/style.css">
If you are on a server, you could do this:
<link rel="stylesheet" type="text/css" href="/css/style.css">
This assumes that 'fl' is the root.
<link rel="stylesheet" type="text/css" href="../../css/style.css">
each ".." for the upper layer of the path.
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
That should be your new path for index.html.
You should be able to reference it like this:
<link rel="stylesheet" type="text/css" href="../../css/style.css">
You would be able to do it like this:
Updated answer
<link rel="stylesheet" type="text/css" href="../../css/style.css" />

CSS only working with direct link, why relative wont work?

Trying to build a webpage. and relative css link wont work. Only direct linking.
Head:
<link href="http://directorym.net/App_Themes/customDarkBlueWAdSense_en-US/customDarkBlueWAdSense_en-US.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://pboo.mobi/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="http://pboo.mobi/corey/App_Themes/mobile.css" />
test at http://pboo.mobi/corey
when i make it relative:
<link rel="stylesheet" type="text/css" href="articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="App_Themes/mobile.css" />
it wont show up.
Suggestions?
Use the absolute path:
<link rel="stylesheet" type="text/css" href="/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="/corey/App_Themes/mobile.css" />
Looking at your site and changing page code on the fly with browser, they show up with both relative and absolute paths.
Anyway remember that relative means "relative to the current page path".
You have three options when it comes to url paths:
a) Absolute
href="http://www.mysite.com/myfolder/myfile.css"
b) Relative
href="myfile.css"
c) Absolute with forward slash instead of domain name
href="/myfolder/myfile.css"
suppose the folders articles_media and App_Themesand the html page are all based in the same original folder. The header of the html page can then contain:
<link rel="stylesheet" type="text/css" href="/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="/App_Themes/mobile.css" />
(note the / before the folder name)
To add to what people have said so far, also consider using the full path but using protocol relative links.
<link rel="stylesheet" type="text/css" href="//pboo.mobi/corey/articles_media/dmNet.css" />
<link rel="stylesheet" type="text/css" href="//pboo.mobi/corey/App_Themes/mobile.css" />
This way you won't have to worry about potential security errors with http:// or https://

Web: What's the correct path to CSS?

i have this structure in my project
I have this page 27.html, so i have to find the CSS file, so i think the correct path was :
<link href="../../../css/style.css" rel="stylesheet" type="text/css" />
<link href="../../../css/inner.css" rel="stylesheet" type="text/css" />
But it's not working, so i wonder why this happens..
Any idea ?
UDPATE:
Hi guys, this is my URL:
/web/blog/2011/june/27.html
I'm trying
<link href="/css/style.css" rel="stylesheet" type="text/css" />
But still not applying the css in the page.
Best regards,
Valter Henrique.
Why not just use the root as a reference?
<link href="/css/style.css" rel="stylesheet" type="text/css">
You need to specify your path from the root URL to make this easier, with the '/' at the front.
<link href="/css/style.css" rel="stylesheet" type="text/css" />
You only need two ../.
Try this:
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<link href="../../css/inner.css" rel="stylesheet" type="text/css" />
You could always just do this to get to your web root:
<link href="/css/style.css">
Rather than fiddling with relative paths, go absolute.
Your paths look OK, are you sure the CSS files were uploaded to your server and that the file names are actually correct?
In doubt with ".." navigation, move your files closer and do some trials and error until you get it.