The LINK element

The LINK element

Specifying external style sheets using the LINK element
- Set the value of href to the location of the style sheet file. The value of href is a URI.
- Set the value of the type attribute to indicate the language of the linked (style sheet) resource. This allows the user agent to avoid downloading a style sheet for an unsupported style sheet language.
- Specify that the style sheet is persistent, preferred, or alternate:
  - To make a style sheet persistent, set the rel attribute to "stylesheet" and don't set the title attribute.
  - To make a style sheet preferred, set the rel attribute to "stylesheet" and name the style sheet with the title attribute.
  - To specify an alternate style sheet, set the rel attribute to "alternate stylesheet" and name the style sheet with the title attribute.
In this example, we first specify a persistent style sheet located in the file mystyle.css:
<LINK href="mystyle1.css" rel="stylesheet" type="text/css">

Setting the title attribute makes this the author's preferred style sheet:
<LINK href="mystyle2.css" title="compact" rel="stylesheet" type="text/css">

Adding the keyword "alternate" to the rel attribute makes it an alternate style sheet:
<LINK href="mystyle3.css" title="mystyle3" rel="alternate stylesheet" type="text/css">
<LINK href="mystyle4.css" title="mystyle4" rel="alternate stylesheet" type="text/css">
The text below is only visible using the corresponding style sheet - if not its rendered in the background color.
style one is active

style two is active

style three is active

style four is active

Using media types to take advantage of the characteristics of the media where the document is to be rendered:
<link rel=stylesheet media="screen" href="website.css">
<link rel=stylesheet media="print" href="printer.css">
<link rel=stylesheet media="aural" href="speaker.css">

web style is active

speaker style is active

printer style is active

If this text is not in orange and has a background image then the @import url(mystyle5.css); command failed
more LINK types

Alternate: Designates substitute versions for the document in which the link occurs. When used together with the "lang" attribute, it implies a translated version of the document. When used together with the "media" attribute, it implies a version designed for a different medium (or media).
Stylesheet: Refers to an external style sheet. See the section on external style sheets for details. This is used together with the link type "Alternate" for user-selectable alternate style sheets.
Start: Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point of the collection.
<LINK rel="start" href="start.html">
Next: Refers to the next document in a linear sequence of documents. User agents may choose to preload the "next" document, to reduce the perceived load time.
<LINK rel="next" href="next.html">
Prev: Refers to the previous document in an ordered series of documents. Some user agents also support the synonym "Previous".
<LINK rel="prev" href="prev.html">
Contents: Refers to a document serving as a table of contents. Some user agents also support the synonym ToC (from "Table of Contents").
<LINK rel="contents" href="contents.html">
Index: Refers to a document providing an index for the current document.
<LINK rel="index" href="index.html">
Glossary: Refers to a document providing a glossary of terms that pertain to the current document.
<LINK rel="glossary" href="glossary.html">
Copyright: Refers to a copyright statement for the current document.
<LINK rel="copyright" href="copyright.html">
Chapter: Refers to a document serving as a chapter in a collection of documents.
<LINK rel="chapter" href="chapter.html">
Section: Refers to a document serving as a section in a collection of documents.
<LINK rel="section" href="section.html">
Subsection: Refers to a document serving as a subsection in a collection of documents.
<LINK rel="subsection" href="subsection.html">
Appendix: Refers to a document serving as an appendix in a collection of documents.
<LINK rel="appendix" href="appendix.html">
Help: Refers to a document offering help (more information, links to other sources information, etc.)
<LINK rel="help" href="help.html">
Bookmark: Refers to a bookmark. A bookmark is a link to a key entry point within an extended document. The "title" attribute may be used, for example, to label the bookmark. Note that several bookmarks may be defined in each document.

Back one step.

last updated on 4/13/2011 12:31:37 PM