How to Use Relative/Absolute Paths in CSS Urls

How to use relative/absolute paths in css URLs?

The URL is relative to the location of the CSS file, so this should work for you:

url('../../images/image.jpg')

The relative URL goes two folders back, and then to the images folder - it should work for both cases, as long as the structure is the same.

From https://www.w3.org/TR/CSS1/#url:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

Using relative URL in CSS file, what location is it relative to?

According to W3:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

Therefore, in answer to your question, it will be relative to /stylesheets/.

If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.

Absolute vs relative URLs

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

What is a better practice: relative or absolute paths for css/js file includes?

I prefer the relative to root approach. If you copy-n-paste code, you don't have to worry about having an incorrect path.

My vote:

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

Of course, this guy makes a case for full URLs, but if you ever move your site to a different domain it could be a huge headache. This guy thinks absolute URLs are a no-no, and takes on each argument. I tend to side with the second.

How to write out the absolute path of a local file correctly when linking css file to html?

I guess this is a popular misconception between server-side and client-side execution context.

1. The webserver provides an html document for http://localhost/whatever/index.htm
2. Your browser reads that document and it's href-attributes. It tries to download the linked files too.
   
   
   • href="styles/style.css" a relative path. The browser will request the file at http://localhost/whatever/styles/style.css
   • href="/styles/style.css" a kind-of-absolute path. The browser will request the file at the root of the servers url http://localhost/styles/style.css
   • href="http://localhost/foobar/styles/style.css" an absolute path. The browser will try to download exactly from there.
   • href="file:///C:\...." a local path on your system. The server has nothing to do with it. The page may only work on your own system not when other people access it through the server from other computers.

Your browser should come some development tools. You can inspect what your browser is requesting and what your server is responding with that tools.

The answer is: use relative or kind-of-absolute urls here.

Relative paths or absolute?

It doesn't affect server performance.

With a relative path, your browser takes the URL and adds it to the URL path already in the address bar.

For example, if a page requested is: http://example.com/folder1/index.php and it has a link pointing to folder2/index.php and its clicked, then the page http://example.com/folder1/folder2/index.php will then be requested from the server. The web browser does the conversion for you.

Absolute vs relative URL for CSS and JS

The short answer is: It doesn't matter. Use whichever style you prefer, just try to be consistent.

The long answer is:

People have been asking this kind of question since CSS became a thing. There are all kinds of answers out there that will argue one way or the other, citing performance implications or maintainability.

None of that matters because:

• Browsers are so efficient that any performance difference is completely moot.
• Worrying about optimizing your inclusion paths is a distraction, and you're better off just writing code.

---

Related Topics