Linking CSS to HTML

[iGuest 3]

<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

 

 

<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.

 

 

----------

 

 

<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.

 

<LINK ... HREF="basic.css" ... TITLE="Preferred" ...><STYLE TYPE="text/css" MEDIA="screen"><!--  @import url(basic.css);--></style>

----------

 

 

<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.

 

 

----------

 

 

<P STYLE="color: black; font-family: Arial, ...">This paragraph has black font with Arial font.</P>

Enjoy :wink:

[iGuest 3]

Wooow that's a good summary. Thanks for sharing it

[iGuest 3]

Which one is the better method, <link> or @import url()? I've heard that <link> is better, but I prefer @import because every of my styles are inside the <style> tag. Someone told me that @import isn't as efficient. I don't know why, though. Does anyone have any idea?