CSS styling:basics

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

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>