referencing CSS

Question

Hi, I would like to construct an HTML link element referencing a CSS file and I would like to use the same reference from multiple documents.

For example, my CSS file is in: {root}/style/style.css

For files in {root}, I use: <link type="text/css" rel="stylesheet" href="style/style.css" /> But for files in {root}/inc, I have to use <link type="text/css" rel="stylesheet" href="../style/style.css" />

Is there a reference to {root} that I can use: something like:

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

Sorry for noob question and thanks!

Answer 1

A simple / usually means "start from root"

Answer 2

Just start the URL with a slash, the {root} is implicit:

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

Answer 3

You could use the <base> element: Rec, but unfortunately, this will also have impact on any other, normal hyperlink in your page.

If you use XHTML (the real stuff, nothing for IE users), take a look at xml:base.

Cheers,

Answer 4

This will work

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

If you have a "/" at the beginning of a file reference, it means it is an absolute reference starting at the root. Without the "/" it would be a relative reference to {wherever-your-document-is}/style/style.css.