12.4. Defining Styles

Styles can be defined in several different ways and attached to a document. The most popular method for defining styles is to add a style block to the head of a document:

<head>
  <style type="text/css">
    Style definitions
  </style>
</head>

Using this method, all style definitions are placed within a style element, delimited by <style> tags. The opening style tag has the following syntax:

<style type="MIME_type" media="destination_media">

In most cases, the MIME type is "text/css." The media attribute is typically not used unless the destination media is nontextual. The media attribute supports the following values:

  • all

  • aural

  • braille

  • embossed

  • handheld

  • print

  • projection

  • screen

  • tty

  • tv

Note that multiple definitions, each defining a style for a different medium, can appear in the same document. This powerful feature allows you to easily define styles for a variety of document usage and deployment.

Alternately, the style sheet can be contained in a separate document and linked to documents using the link (<link>) tag:

<head>
  <link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>

The style sheet document, mystyles.css, contains the necessary styles:

p.heading { font-size: larger; font-style: italic; }

Then, when the style definitions in the external style sheet change, all documents that link to the external sheet reflect the change. This presents an easy way to modify a document's format—whether to affect new formatting for visual sake or for a specific purpose. ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial