The tag is placed in the document HTML HEAD.
The optional TYPE attribute of HTML Style sheet is used to specify a
media type--text/css for a Cascading Style Sheet--allowing
browsers to ignore style sheet types that they do
not support. Configuring the server to send text/css
as the Content-type for CSS files is also a good idea.
External HTML style sheets should not contain any HTML tags like <HEAD> or <STYLE>.
The style sheet should consist merely of style rules or statements.
The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium
or media to which the style sheet should be applied. Possible values are
• screen (the default value), for presentation on non-paged computer screens;
• print, for 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.
Multiple media are specified through a comma-separated list or the value all.
HTML Tutorial guide the REL attribute is used to
define the relationship between the
linked file and the HTML document.
REL=StyleSheet specifies a persistent
or preferred style while REL="Alternate
StyleSheet" defines an alternate style.
A persistent style is one that is always
applied when style sheets are enabled.
The absence of the TITLE attribute, as in
the first <LINK> tag in the example, defines
a persistent style.
A preferred style is one that is automatically
applied, such as in the second <LINK> tag in the
example. The combination of REL=StyleSheet and a
TITLE attribute specifies a preferred style. Authors
cannot specify more than one preferred style.
An alternate style is indicated by
REL="Alternate StyleSheet". The third
<LINK> tag in the example defines an alternate style,
which the user could choose to replace the
preferred style sheet.
Embedding an HTML Style Sheet
A style sheet may be embedded in a document with the STYLE element:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(ggl.gif) red; color: black }
P EM { background: yellow; color: black }
note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
The HTML STYLE element is placed in the document HEAD of the document.
The required TYPE attribute is used to specify a
media type, as is its function with the LINK element.
Similarly, the TITLE and MEDIA attributes may also be
specified with STYLE.
Very old browsers such as Netscape 2.0, unaware
of the STYLE element, would normally show its contents
as if they were part of the BODY, thus making the style
sheet visible to the user. To prevent this, the contents
of the HTML STYLE element may be contained within an SGML comment like
(<!-- HTML comments -->), as in the preceding example. This use of
comment tokens to hide the HTML style sheet from old browsers should
only be used in HTML, where the comment tokens are actually part
of the style sheet. In XHTML, the comment tokens would be a real
XML comment, and the style sheet would be hidden from
browsers that treat the document as XML.
Here in HTML Tutorial you saw an embedded style sheet should be used when a single
document has a unique html style. If the same style sheet is
used in multiple documents, then an external style sheet
would be more appropriate to use.
Importing a Style Sheet in HTML
A style sheet may be imported with CSS's @import statement. This statement may be used in a
CSS file or inside the HTML STYLE element: