CSS styling:style key

The style key has special properties:

  1. The value of the style key is inserted into the <head> element as a <style element.
  2. Values assigned to style are – exceptionally – added to any previous value of style.

This allows you to define. style repeatedly in a page if you desire, thus putting the relevant CSS statements close to the markup that uses them – much like a programmer places variable declarations near their point of use.

See the <style> element in the HTML generated section below.

Also note the use of the xilize statement to generate the prolog and epilog necessary for a complete HTML document as well as assign a value to the special css key. The definition of the css key is not required and included only to make the rendering of the example like that of the others.

Xilize markup browser rendering
xilize. css examples.css

In one place in the document you might have:

define. style
table.x td { border: 1px solid lightgray; }

table(x). | gray | borders

Then later in the document, add to the style:

define. style
table#y td { background: lightgray; }
table#y tr td:first-child { background: cornsilk; }

table(#y). | something | quite | different

...and:

table(x#y). | and something | using both
|\2. class and id tag attributes

finally, adding more styling

table(x){color:green;}. | gray | borders

In one place in the document you might have:

gray borders

Then later in the document, add to the style:

something quite different

...and:

and something using both
class and id tag attributes

finally, adding more styling

gray borders

XHTML generated

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link href="examples.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
table.x td { border: 1px solid lightgray; }
table#y td { background: lightgray; }
table#y tr td:first-child { background: cornsilk; }
  </style>
</head>
<body>

<p>In one place in the document you might have:</p>

<table class="x">
<tbody>
  <tr>
    <td>gray</td>
    <td>borders</td>
  </tr>
</tbody>
</table>

<p>Then later in the document, add to the style:</p>

<table id="y">
<tbody>
  <tr>
    <td>something</td>
    <td>quite</td>
    <td>different</td>
  </tr>
</tbody>
</table>

<p>...and:</p>

<table class="x" id="y">
<tbody>
  <tr>
    <td>and something</td>
    <td>using both</td>
  </tr>
  <tr>
    <td colspan="2"> class and id tag attributes</td>
  </tr>
</tbody>
</table>

<p>finally, adding more styling </p>

<table class="x" style="color:green;">
<tbody>
  <tr>
    <td>gray</td>
    <td>borders</td>
  </tr>
</tbody>
</table>

</body>
</html>