I want to know about how the relative path works like ../ or ./

Get Help CSS
#1

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

While I am taking a course for CSS,

I found path (…/fonts/Glegoo-Regular.ttf)

Well As I don’t know what …/ stands for, so I just used the hint without knowing what it actually means.

Also I saw some lines like this ‘./’ .

I know it’s related with file path, yet Still getting confused. I even try to google it, but not shown on search bar.

#2

./
is the same directory;

../
is the directory that contains this directory (the parent)

Deduce from this what subsequent levels will be.

3 Likes
#3

Thanks! So the dot acts as jump to previous directory.

#4

When its a double dot, yes. A single dot is the current directory.

1 Like
#5

From what I can gather, when the relative path specifies a file in the same directory, the ./ is optional - is that correct?

e.g. When we are linking to a file style.css from a file index.html, and both files are in the same directory, my understanding is that we can write either of the following:

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

OR

<link href="style.css" rel="stylesheet">

What I’m more unclear about, is whether the ../ is also optional when the relative path needs to specify a file in a different directory, but within the parent directory…

For example, in CSS Typography - Font-Face III, we are asked to add an src declaration to an @font-face rule set, which has a relative path to a file in a different directory (fonts) within the same parent directory.

The task allows:

  src: url("../fonts/Glegoo-Regular.ttf") format("truetype");

But it doesn’t allow:

url("/fonts/Glegoo-Regular.ttf")

or

url("fonts/Glegoo-Regular.ttf")
2 Likes
FAQ: CSS Typography - Font-Face III
#6

They are equivalent, so yes.

That path points to the parent directory of the current one (with index and style).

parent/
    fonts/
        Glegoo-Regular.ttf
    project/
        index.html
        style.css

"/fonts/Glegoo-Regular.ttf"

points to the site root, if a web server, else the volume root if our own computer. This will not do since our project here is buried in a path of several directory levels.

"fonts/Glegoo-Regular.ttf"

assumes fonts is in the same directory as index.html.

3 Likes
#7

Thanks, that’s really helpful… the only things I don’t understand from your reply are “site root” and “volume root” (but I get the basic idea that just using the forward slash won’t work :wink:)

1 Like
#8

site root is the directory mapped to a domain’s home page.

example.com/index.html

volume root refers to the lowest directory of your hard drive, as in C:\. On our local system we generally keep our files in a user documents directory which is not on the volume root.

4 Likes
#9

So only this works?

src: url("../fonts/Glegoo-Regular.ttf") format("truetype");

#10

One cannot out and out say that it works but the URL makes sense if going up one level to a parent and then over to fonts.

1 Like
#11

Okay cool thank you <3

1 Like