9

I'm a complete beginner of html/css.

I use PHP to include the same head section in different webpages. There is a href link in the head section linking to an external css. file which styles the layout of multiple webpages.

Since the different webpages locate in different subfolders in the root folder, I have to use the absolute path to link the css. file, and here comes the problem: I don't know how to write it correctly.

When I use relative path for each individual webpage, the link works fine, but when I tried to use the absolute path, it simply doesn't work.

I have tried:

1.href="file:///C:\xampp\htdocs\root\styles\style.css"

2.href="file:///C:/xampp/htdocs/root/styles/style.css"

3.href="file://C:/xampp/htdocs/root/styles/style.css"

4.href="C:/xampp/htdocs/root/styles/style.css"

5.href="c:/xampp/htdocs/root/styles/style.css"

Here is the beginning part of the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <?php include('common/head.php') ?>
    <title>Home</title>
  </head>

and this is the head section:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="file:///C:\xampp\htdocs\root\styles\style.css">
Topstar
  • 113
  • 1
  • 1
  • 3

4 Answers4

11

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.

lupz
  • 3,620
  • 2
  • 27
  • 43
  • I forgot to mention that I use xampp to build a local server to test my website, and I found out that instead of directing the link to a folder path on my computer I should point it to the "http://localhost/root/...", and this solved the problem. – Topstar Oct 18 '19 at 10:13
  • When the browser reads `href="localhost/root..."` it will try to connect to the local host. This is fine when the server (xampp's apache) runs on your own system. But it might not work when you put this thing onto the web! `href="/root..."` should do fine :) – lupz Oct 18 '19 at 10:50
2

To get the partial path use the forward slash

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

note that the / means the root of the current drive.

You also have ./which means the current directory.

And the ../ meaning the parent of the current directory.

Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
0

With HTML link references, when the file is coming off a server, you can't request files below the root path of the domain.

E.g. with http://localhost/index.php, you can't get anything past the root path being served. (C:\xampp\htdocs\root in this case from the look of your code sample)

If you start the link with a slash, this will give you an absolute link, and will always go from the host's root path. This is especially useful as you don't need to know where in the website you currently are.

<link href="/styles/style.css" />
<!-- this is seen as "{domain}/styles/style.css" -->

If you want to link relative to the current path, you can omit the first slash, and this will look for a file based on the current path.

<link href="styles/style.css" />
<!-- this is seen as "./styles/style.css" -->

This is the case as well within your CSS files if you need to reference images, etc.

Jon Allen
  • 335
  • 1
  • 9
0

I forgot to mention that I use xampp to build a local server to test my website, and I found out that instead of directing the link to a folder path on my computer I should point it to the "http://localhost/root/...", and this solved the problem.

Topstar
  • 113
  • 1
  • 1
  • 3