Home | HTML Tutorials | JavaScript Editor

Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor.

STYLE - Embedded Style Sheet

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.

Most current 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.0 and are case-sensitive:

• screen (the default), for non-paged computer screens;
• tty, for fixed-pitch character grid displays (such as the display used by Lynx);
• tv, for television-type devices with low resolution and limited scrollability;
• projection, for projectors;
• handheld, for handheld devices (characterized by a small, monochrome display and limited bandwidth);
• print, for output to a printer;
• braille, for braille tactile feedback devices;
• aural, for speech synthesizers;
• all, for all devices.

Netscape Navigator 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 Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all. Most other browsers ignore the MEDIA attribute.

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 }
-->
</STYLE>

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

• STYLE in W3C HTML 4.0 Recommendation
• STYLE in W3C HTML 3.2 Recommendation
• STYLE in WDG HTML 3.2 Reference
• STYLE in Learning HTML 3.2 by Examples

Home | HTML Tutorials | JavaScript Editor

Get Advanced JavaScript and Ajax Editor, Validator and Debugger! 1st JavaScript Editor.