using CSS

external CSS, adding <link> element to the <head>

To link your HTML page to an external style sheet define the key css to the path to the stylesheet.

define. css myStyles.css

In natural mode Xilize searches for a styleysheet named default.css then for any file with the .css extension.

persistent, preferred, and alternate stylesheets

The W3C spec for external stylesheets allows you to "Specify that the style sheet is persistent, preferred, or alternate":

  • To make a style sheet persistent, set the rel attribute to "stylesheet" and don't set the title attribute.
  • To make a style sheet preferred, set the rel attribute to "stylesheet" and name the style sheet with the title attribute.
  • To specify an alternate style sheet, set the rel attribute to "alternate stylesheet" and name the style sheet with the title attribute.

The complete set of special keys for external CSS is:

key stylesheet type example of generated <link> element
css persistent <link href="file1.css" rel="stylesheet" type="text/css" />
cssPreferred preferred <link href="file2.css" title="title2" rel="stylesheet" type="text/css" />
cssAlternate alternate <link href="file3.css" title="title3" rel="alternate stylesheet" type="text/css" />

Xilize markup syntax allows for multiple files of each type which will generate multiple <link> elements of that type:

define. css fileA.css fileB.css fileC.css

or

define. css
fileA.css
fileB.css
fileC.css

Preferred and alternate stylesheets require a title:

define. cssPreferred
titleE fileE.css

define. cssAlternate
titleL fileL.css
titleM fileM.css
titleN fileN.css

or if you have just one:

define. cssPreferred titleE fileE.css

define. cssAlternate titleL fileL.css

adding <style> element to <head>

To add a <style> element inside the <head> element define the key style to a collection of CSS statements. Typically this uses the multi-line form of define.:

define. style
h3 { font-weight: bold; margin-top: 2em; }
#special { font-size: 120%; display:block; }

Note: multiple style defines in a file are additive. Thus you can define style properties near where they are used which can be helpful for expirimentation and testing.

using signature modifiers

Signature modifiers are part of the original Textile specification and a core feature of Xilize. Many of them translate directly to the style attribute of the tag they modify. For example:

p=. <p style="text-align:center;">
p)))>. <p style="text-align:right;padding-right:3em;">

Perhaps the most common use of signature modifers is adding a class or id attribute to a tag so you can apply styling from an external stylesheet:

p(myClass). <p class="myClass">
p(#myId). <p id="myId">
p(myClass#myId). <p class="myClass" id="myId"></p>

Modifiers may be applied to

  • all signatures — prior to the . (dot/period)
  • table rows — prior to the first | on the line
  • table cells — just after the | and terminated with a . (dot/period)
  • lists — prior to the first * or #
  • list items — just after the last * or # at the beginning of a line and terminated with a space
  • <span> markup %text% — just after the first % and terminated with a space

adding "style=" attribute to an HTML tag

There is also the explicit style modifier { css statements }:

p{ background: blue; padding: 1em; }. <p style="background: blue; padding: 1em;">

which can be used in conjunction with the other modifiers:

p{ color:gray; }=. <p style="color:gray;text-align:center;">

default CSS stylesheet

The default external stylesheet default.css is provided only to demonstrate the CSS hooks provided in the HTML generated by Xilize. You are encouraged to modify or replace it; Xilize itself has no dependency on any stylesheet.

In natural mode, external stylesheets are automatically located and used in the creation of the HTML page. In other modes (i.e. tree, dir, file), simply define the css key to the filename of an external stylesheet to have it added to the HTML <link> element (see the xilize. and define. signatures).

default styling

The default CSS stylesheet generated by XAA, default.css, applies styling to the following HTML elements:

<blockquote> distinquishing color
<body> margin and padding, background set to white
<code> distinquishing color
<hr> 1px high, no margin, no padding
<img> no borders
<pre> distinquishing color
<table> colasped borders
<tbody> distinquishing color
<td> top vertical alignment and padding
<thead> bold text, distinquishing color

Feel free to change, replace, or remove default.css which is offered only as a starting point. Xilize has no dependency on it.

class attribute

The following CSS class names are used by Xilize in the generated HTML.

caps placed on <span> tag generated for words that look like acronyms so they can be displayed in a distinguishing manner:
TLA (slightly smaller) vs. TLA (no special styling)
fn_mark1 the footnote number shown in the text to flag a foot note applies, placed on <span> tag
fn_anchor1 the footnote number shown preceding the footnote text, placed on <span> tag
fn_text the actual text of the footnote, this CSS class name is place on the <p> tag that Xilize generates to enclose the text
footnotes Xilize generates a <div> section with this CSS class name to enclose a contiguous set of footnote blocks (i.e. fn#. blocks)
toc Xilize places the toc class name on the top-level <ul> or <ol> tag generated by the toc. signature. The default CSS stylesheet turns off text-decoration on <a> tags that are children in that scope.

1 The default stylesheet assumes modern footnote styling. If you are using classic, alter the stylesheet. Classic footnote styling generates HTML <sup> tags; modern styling does not.