Making a TEI File Look Good in a Browser Syd Bauman Texas A & M University Women Writers Project (via website)
wwp@Brown.edu

Copyright 2007 Syd Bauman, Julia Flanders, and Brown WWP

This TEI-encoded XML file is available under the terms of the Creative Commons Attribution-ShareAlike 3.0 (Unported) license.

 Providence, RI USA

based on same talk given 2007-09-19 at the Transliteracies Project and Early Modern Center at the University of California, Santa Barbara

 Remove stuff now duplicated on handout; fix wording of reference to spec Changed elem to element, removed erroneous space from an example, and added CSSZenGarden link. Chnaged from using gi to elem for generic identifier in selector templates automatically converted from presentation.odd conforming to yaps.odd conforming using p2y.xslt and p2y.perl
What, me worry?

I am not a CSS expert. I use it, that's all.
CSS Stylesheets

Allow you to associate a style (i.e., typeface, size, color, spacing, etc.) to elements of XML documents.

Syd — show ’em this slide using css_demo-html.css, instead.

This is more of a brief crib sheet than a real CSS2 reference. It is intended to provide you with a few useful selectors, properties, and values, just to get you started. For detailed information see the CSS 2.1 specification itself, or any one of the many on-line tutorials. The prompts from your CSS editor may also prove helpful, as may a stroll through http://www.csszengarden.com/.
Some CSS2 Snippets
Basic black

XML:

<greeting>Hello, world!</greeting>

CSS:

greeting { font-size: x-large; font-stretch: wider; font-style: italic; }

Output:

Hello, world!
Cue color Owl lived at The Chustnuts, an old-world residence of great charm, which was grander than anybody else's, or seemed so to Bear, because it had both a knocker and a bell-pull …

]]> persName { color: blue; } emph { font-weight: bold; color: #806010; } lb { display: block; } Owl lived at The Chustnuts, an old-world residence of great charm, which was grander than anybody else's, or seemed so to Bear, because it had both a knocker and a bell-pull …
Slightly more realistic teiHeader { display: none; } body { margin: 1em 1em 1em 1em; background-color: green; font-family: Helvetica,san-serif; } div[type='chapter'] { display: block; border-width: thin; border-color: forestgreen; border-style: solid; }
Quotes To be or not to be?, to walk or not to walk…oh, hang it all!]]> quote:before, said:before { content: open-quote; } quote:after, said:after { content: close-quote; } quote, said { quotes: "“" "”" "‘" "’"; } “‘To be or not to be?’, to walk or not to walk…oh, hang it all!”
Supported Browsers

All modern browsers support CSS for HTML, some more, some less. Most support CSS for XML: notably, though, not some (all?) versions of MSIE.

Some browsers with varying degrees of support for CSS include Internet Explorer, Firefox, Safari, Camino, iCab, Opera, Radon, OmniWeb, Nova X, Sunrise, Xyle scope, Netscape, Seamonkey, Demeter, and Shiira.
Other Support Editors oXygen provides color syntaxing, indentation, and validation CSSEdit provides color syntaxing, some indentation, completion, and a GUI interface for styles Emacs has a css-mode, of coures Those are the ones I've used; there are dozens of others
What is CSS2?

CSS2 stands for “Cascading Style Sheets, level 2”, and is a World Wide Web Consortium specification.

The specification itself can be found on-line at the W3C site.

CSS3 has been around for a long time, but is still at an earlier stage of development, and has poor browser support.
Basic Usage: syntax

The core of the stylesheet consists of a series of rulesets. Each has the same basic syntax.

selector { property: value; }

selector { property1: value1; property2: value2; ... propertyN: valueN }

Most of the whitespace outside of the selector is insignificant.
Basic Usage: selectors some selectors element element descendant-element element > child-element element[attr="value"]

Selectors may be combined simply by listing them left-to-right. Complete list is available in the specification.

 matches any me element matches any bar element that is a child of a foo element matches any bar element that is a descendant of a foo element matches any primo element that is the first child of its parent matches any foo element that has a bar attribute, whatever the value matches any foo element that has a bar attribute with the value Cheers matches any foo element whose foo attribute value is a list of space-separated values, one of which is exactly equal to warning

Multiple selectors may be used at once, separated by commas. E.g.: name[type="person"], persName { color: red; }

I have not gotten a CSS2 selector to work for xml:id whether using [xml:id='whatever'] or the short-hand # selector.
Associating Stylesheet with XML Instance

To tell a browser which stylesheet to use, put the following after the XML declaration, but before the DOCTYPE declaration (if any)

]]>

For example: ]]>

In HTML or XHTML link can be used instead.
The Zen of CSS

One excellent way to see the power of CSS and learn it is to stroll through the CSS Zen Garden.