The XHTML WYSIWYG Editor For Desktop & Web Applications

style

Definition

The style element can contain CSS rules (called embedded CSS) or a URL that leads to a file containing CSS rules (called external CSS).

Example

This is an example of embedded CSS:

  1. <head>
  2. <style type="text/css" media="screen">
  3. h1 {color: red; text-align: center}
  4. </style>
  5. </head>

This is an example of external CSS:

  1. <head>
  2. <style type="text/css" media="screen">
  3. @import url('screen.css');
  4. </style>
  5. </head>

The @import directive is used to hide CSS files from older Web browsers (such as Netscape 4) that do not fully support CSS.

Best practice

If your Web pages use mostly different CSS rules, embedded CSS would probably be more appropriate. However, it is generally more likely that Web pages on the same Web site will use many of the same CSS rules. In this situation, there are benefits to using external CSS. For example, since all the CSS rules are stored in one place, when the look and feel of a Web site needs to be updated, it is only necessary to modify CSS rules in a single file.

Depending on how a Web browser is configured, it can cache external CSS. The advantage here is that the browser will have fewer files to download, which translates into speed, and, if the site is really popular, bandwidth savings.

When updating CSS files, make sure that the browser always downloads the latest version. To trick Web browsers into doing this, make the URL to the CSS file unique. One way to render it unique is to put a question mark followed by a number after the URL to the CSS file. Then, each time you update the CSS file, simply increment the number. For example:

  1. <head>
  2. <style type="text/css" media="screen">
  3. @import url('screen.css?25');
  4. </style>
  5. </head>

Attributes

Basic

media
(MediaDescriptions) This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is screen.
title
(Text) This attribute offers advisory information.
type
(ContentType) This attribute specifies the style sheet language of the element's contents. The style sheet language is specified as a content type. For example: text/css. This attribute is required.

Advanced

xml:space
This attribute indicates if white space (extra spaces, tabs) should be preserved. Possible value is preserve.

Common internationalization attributes

xml:lang
(NameToken) This attribute specifies the base language of an element's attribute values and text content.
dir

This attribute specifies the base direction of text. Possible values:

  • ltr: Left-to-right
  • rtl: Right-to-left

Contains

  • Text