CODEWITHSUNDEEP
htmlcss
Varun Khanna
Varun Khanna

Reputation: 85

My css file is not being found by the browser despite giving the absolute path in the html file

CSS code

.headi {
font-size: 4em;
}

HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Organicking</title>
  <link href="‪‪C:\Users\01Var\Desktop\organicking\fanandcool.css" rel="stylesheet" type="text/css"  />
</head>
<body>
  <a href="C:\Users\01Var\Desktop\organicking\organicking.html">
    <img src="C:\Users\01Var\Downloads\realistic-tomato-isolated\6146.jpg" 
style="width:100px;height:100px;" border = "2" align = "left" />
</a>

<h1 class="headi">Organicking</h1>

</body>
</html>

ERROR message

%E2%80%AA%E2%80%AAC:/Users/01Var/Desktop/organicking/fanandcool.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

On opening the file in browser "Your file was not found" is what i see, and the location of the file showing in the browser URL field is

file:///C:/Users/01Var/Desktop/%E2%80%AA%E2%80%AAC:/Users/01Var/Desktop/organicking/fanandcool.css

Upvotes: 0

Views: 2274

Answers (6)

t.niese
t.niese

Reputation: 40842

If you look closely at the error message you can see %E2%80%AA%E2%80%AA in front of the URL.

%E2%80%AA is the URL encoded Unicode U+202A which stands for Left-to-Right Embedding (LRE) and is an invisible character controlling the write direction.

And that invisible character breaks the URL resolving.

Depending on the editor you might be able to display those invisible chars.

And if not then you might be able to get rid of it if you select "‪‪C in href="‪‪C:\Users\01Var and then manually type "C again.

Besides that: URLs use / and not \ as path separators, and local URLs have to start with file:///, so your absolute path as to be file:///C:/Users/01Var/Desktop/organicking/fanandcool.css

Upvotes: 2

Varun Khanna
Varun Khanna

Reputation: 85

I created a new folder in the "organicking" folder with name "style" and the css file inside of the "style" folder, and did not mention any folder in the path. I simply did so: link href="fanandcool.css"

And, it has worked!

Upvotes: 0

hibernate fariala
hibernate fariala

Reputation: 74

You can put the css and html files in the same folder and then you must only specify the name of the css file in html code.

<link href="‪‪fanandcool.css" rel="stylesheet"    type="text/css"  />

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can make a separate folder for your CSS file like "style" and then add path to html file like,

<link rel="stylesheet" type="text/css" href="style/style.css">

Upvotes: 0

Nitin tiwari
Nitin tiwari

Reputation: 690

It is showing that your file does not exist or the Given path is wrong.

there can be two possibilities use "/" forward slash instead of backward because it is a relative path or you don't need to provide the whole path if you are in the same folder where your css folder is just do this.

 <link rel="stylesheet" type="text/css" href="css/fanandcool.css">

Upvotes: 1

Soumya Ranjan Swain
Soumya Ranjan Swain

Reputation: 187

Add a relative path as:

<link href="\fanandcool.css" rel="stylesheet" type="text/css"  />

Upvotes: 0

Related Questions