CODE
<LINK REL="StyleSheet" HREF="basic.css" TYPE="text/css" TITLE="Preferred Style" MEDIA="screen, projection">
<LINK REL="Alternate StyleSheet" HREF="altstyle.css" TYPE="text/css" TITLE="Alternate Style" MEDIA="screen">
Linking to an External Style Sheet
---
LINK tag
The link tag is used between the HEAD tags. It is the most common way to link CSS to HTML.
REL Attribute
The REL attribute defines the differences between a persistent or preferred style and an alternate style.
- Preferred style is the style that is automatically applied to the page.
- Alternate style is a style which the user could choose to replace the preferred style.
MEDIA Attribute
screen - (default value) for computer screens
print - output to a printer
projection - for projected presentations
aural - for speech synthesizers
braille - for presentation on braille tactile feedback devices
tty - for character cell displays (using a fixed-pitch font)
tv - for televisions
all - for all output devices
CODE
<LINK ... HREF="basic.css" ... TITLE="Preferred" ...>
<LINK ... HREF="tables.css" ... TITLE="Preferred" ...>
<LINK ... HREF="forms.css" ... TITLE="Preferred" ...>[/color]
Multipal Linked Style Sheets
You can have multipal preferred style sheets on the same page by simply linking them all, and giving each the same TITLE.
----------
CODE
<STYLE TYPE="text/css" MEDIA="screen">
<!--
@import url(basic.css);
-->
</style>
Importing an External Style Sheet
---
@import
The @import statement must be the first thing that shows up in your STYLE tag before any other CSS is added. This is a second way of linking your CSS to HTML. It is used in conjunction with the LINK tag because older versions of Netscape didn't recognize the LINK tag. Because Internet Explorer picks up on both the LINK and @import tags, the LINK is put first, followed by the start of the STYLE tags and the @import as shown below.
CODE
<LINK ... HREF="basic.css" ... TITLE="Preferred" ...>
<STYLE TYPE="text/css" MEDIA="screen">
<!--
@import url(basic.css);
-->
</style>
----------
CODE
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(dog.gif); color: white; ... }
P BR { background: yellow; color: black; ... }
.th01 { color: black; ... }
-->
</STYLE>
Embedding a Style Sheet
---
Embedding a style sheet is the same as you would to @import one, except all the style sheet code is between the STYLE tags instead of on a seperate file.
----------
CODE
<P STYLE="color: black; font-family: Arial, ...">This paragraph has black font with Arial font.</P>
Enjoy :wink:
