Tips on using CSS with XML/TEI

For those who are fairly familiar with using CSS with HTML or XHTML, one might be familiar enough with how to define colors, etc., but still remain unaware of how to make a simple stylesheet.

Since one cannot use .class-name as in X/HTML (though some processors might be able to use xml:id to be the target of the # id selector), one first ought to be familiar with the generic attribute selectors.

For example,

<div type="chapter">...

Could be styled with:

div[type="chapter"] {}

Another important adjustment to make is that while X/HTML defines a default display behavior (e.g., <p> in HTML is block while <span> in HTML is inline), other XML is more generic and forces you to define which elements out to be defined as block (they will otherwise be rendered inline).

For example, for TEI, you might define the following:

p, div, div1, div2, div3 {display:block}

You can also specify inline elements by using display:inline

HTML to CSS Equivalents

(Display is inline by default unless indicated.) (Note that in order to bypass the spam filter, some bogus spaces were added in the display: none; lines.)

• blockquote - display:block; text-indent: 40px;
• div - display:block;
• em - font-style:italic;
• (head - display: none;)
• i - font-style:italic;
• (link - display: none;)
• (meta - display: none;)
• (script - display: none;)
• span - display:inline; /* unnecessary since default */
• (style - display: none;)
• (title - display: none;)
• ul - display:block; text-indent: 40px;
• (etc.)