Xilize example

CSS styling:basics

There are several ways to apply CSS styling to Xilize markup.

special keys can be used to
- specify an external stylesheet with a <link rel="stylesheet" type="text/css" href="somefile.css" /> element in the <head> section of the document
- add CSS statements inside <style type="text/css"> tags in the <head> section
the modifier string applies styling
- explicitly inside { and }
- through the padding and alignment modifiers

The example below defines the special key style to add the CSS statements to the <style type="text/css"> tags in the <head> section of the generated HTML.

Note the use of the xilize statement to generate the prolog and epilog necessary for a complete HTML document. This allows the generated HTML to include the <head> element in which the <style> element resides for the purpose of this example. The xilize statementi is not required in natrual mode.

Xilize markup	browser rendering
xilize. define. style .special { background: ivory; } p.special { letter-spacing:0.3em; color: purple; } blockquote.special { font-style: italic; } p(special). Example of styling. A normal paragraph. bq(special). Example of styling. bq. A normal block quote.	Example of styling. A normal paragraph. Example of styling. A normal block quote.

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" />
  <style type="text/css">
.special { background: ivory; }
p.special { letter-spacing:0.3em; color: purple; }
blockquote.special { font-style: italic; }
  </style>
</head>
<body>

<p class="special">Example of styling.</p>

<p>A normal paragraph.</p>

<blockquote class="special">
<p>Example of styling.</p>
</blockquote>

<blockquote>
<p>A normal block quote.</p>
</blockquote>

</body>
</html>