The Web Design Group

STYLE - Embedded Style Sheet

Syntax <STYLE>...</STYLE>
Attribute Specifications
Contents An embedded style sheet
Contained in HEAD

The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document.

The required TYPE attribute of STYLE is used to specify the Internet media type of the style language. For Cascading Style Sheets, the TYPE attribute value should be text/css.

The optional TITLE attribute gives a title for the style sheet. Without a TITLE attribute, the style sheet is always applied when style sheets are enabled. With a TITLE attribute, the style sheet is automatically applied but the user may choose to disable the style sheet while keeping or enabling other style sheets. Style sheets with the same title are considered to be the same style sheet.

Many browsers ignore the TITLE attribute on style sheets and do not allow the user to selectively enable or disable individual style sheets.

The MEDIA attribute specifies the media on which the style sheet should be applied. This allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers. The attribute's value is a comma-separated list of media descriptors. The following media descriptors are defined in HTML 4 and are case-sensitive:

Netscape 4.x incorrectly ignores any STYLE element with a MEDIA value other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Netscape 4.x, even if the presentation device is a computer screen. Netscape 4.x also ignores style sheets declared with MEDIA=all.

An example of an embedded style sheet follows:

<STYLE TYPE="text/css" MEDIA=screen>
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }

Pre-HTML 3.2 browsers, 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, style languages like CSS allow the style sheet to be contained within an SGML comment (<!-- comment -->), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

More Information