an External Style Sheet Using a link Element or @import rule

Here’s an example of an external style sheet reference that uses a link element:

<link rel=”stylesheet” type=”text/css” href=”/style.css” media=”screen”>

The link element, which must reside within the head element of an HTML document, links an external style sheet to the document. Multiple, comma-separated media types can be specified in the media attribute, for example, media=”screen,projection”. If it’s omitted, this attribute defaults to media=”screen”, according to the HTML4 specification, but in reality, browsers seem to apply media=”all” if the attribute is omitted.

Here’s an example of a style sheet reference that uses an @import rule:

<style type=”text/css”>
@import url(/style.css);
</style>

The style element, like the link element, must reside within the head element. Relative URIs in the href attribute or @import rule are relative to the HTML document that contains the link. (When @import is used inside an external style sheet, relative URIs are relative to the importing style sheet.)

so what is media? actually, I don’t know what is media. But we specify the output media using the predefined media types.

“all” – applies to all media
“Braille” – Braille/tactile feedback devices
“embossed” – paged Braille printers
“handheld” – handheld devices
“print” – paged media and print preview mode on the screen
“projection” – projected presentation (used by Opera in full-screen mode)
“screen” – color computer screens
“speech” – speech synthesizers (see the note below)
“tty” – media with a fixed-pitch character grid
“tv” – television-type devices