Description

The href defines the location of the resource. This may be a style sheet in the same directory (as shown in the example), a page located elsewhere on the same server, or a resource held on another server.

If the referenced resource resided in a directory that was one level higher than the referencing document, the syntax would be as follows:

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

Here, ../ equates to the instruction “move up one directory level in the hierarchy.”

You can also reference a document relative to the web site’s root (that is, the folder or file after the domain name) like so:

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

This code basically says “refer to the document basic.css that can be found in www.mydomain.com/stylesheets.” This is a very handy way of referencing a document, as you can move the document containing the link to any location on the file system without changing the reference.

If you are linking to a resource that’s held on some other server, you’d express the href using a complete URI, as follows:

<link rel="stylesheet" type="text/css"
    href="http://www.somedomainname.com/stylesheets/basic.css"/>

Value

This attribute takes as its value the location of the destination document relative to the referencing document, relative to the server root, or as a complete URI containing the http:// protocol, the server name, and the path to the document on that server.

It’s also possible to use as values an ftp:// location (though it’s not common) or data, like so:

<link rel="stylesheet" type="text/css"
    href="data:text/css,body%20{%20background%3A%20green%3B%20}"/>

We can also use glorious base64 format:

<link rel="stylesheet" type="text/css"
    href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQ6IGdyZWVuOyB9"/>

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.