CSS Tag Properties

We have seen how to integrate CSS into an (X)HTML document, but the properties of the tag(s) are still a little hard to understand.

  1. rel=""
  2. type=""
  3. media=""
  4. title=""
  5. id=""

Example:

<link href="default.css" rel="stylesheet" type="text/css" media="all" title="mycss" id="default" /> <style type="text/css" media="screen" title="Inline"> <!-- body{color:#FFFFFF; background-color:#000000;} --> </style>

Rel:

The "rel" attribute describes the relationship from the current document to the anchor specified by the href attribute, in our case that would be the relationship between the HTML document and our default.css style sheet.

Type:

The "type" attribute gives an advisory hint as to the content type of the content available at the link target address, our example - default.css. It allows user agents to opt to use a fallback mechanism rather than fetch the content if they are advised that they will get content in a content type they do not support.

Authors who use this attribute take responsibility to manage the risk that it may become inconsistent with the content available at the link target address.

Media:

Within the tag "media" you can define which user agent the style sheet or embedded styles should be used for. There are currently 9 standard media types that are in use:

  1. media="all"
    This defines that the style sheet or style block can be used by all user agents

  2. media="aural"
    Allows web developers to produce a style sheet for speech synthesizers

  3. media="braille"
    Specified in CSS2 for braille tactile feedback devices

  4. media="handheld"
    For handheld devices (typically small screen, monochrome, limited bandwidth)

  5. media="print"
    For paged, opaque material and for documents viewed on screen in print preview mode

  6. media="projection"
    Used for projected presentations, for example projectors or print to transparencies

  7. media="screen"
    Mainly for computer monitors

  8. media="tty"
    For media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities

  9. media="tv"
    Used for television-type devices (low resolution, color, limited-scrollability screens, sound available)

Title

The "title" is a user specific tag. You can name your CSS style block or external cascading style sheet as you wish.

ID

The "id" tag can only be used when calling your style sheet externally. The "id" is as in the "title" user specific.

When using the "id" and also using multiple style sheets it is to note that the "id" for the individual style sheets can not be the same.

A common use for the "id" is "style switching" either via a programming language such as "PHP" or using JavaScript.