Making a TEI File Look Good in a Browser

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/.

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.

Many people report this does not work in Internet Explorer; we have verified that it works in Firefox, Safari, Camino, iCab, Opera, Radon, OmniWeb, Nova X, Sunrise, and Xyle scope; we have not tested Netscape or Seamonkey, but they use the same engine as Firefox, so should work; we have verified that it does not work in Demeter or 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?

Let's practice reading TEI source:Cascading Style Sheets, level 2CSS2 is a World Wide Web ConsortiumW3C 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.

Simple Example emph { font-weight: bold; }

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.

me matches any me element foo > bar matches any bar element that is a child of a foo element foo bar matches any bar element that is a descendant of a foo element primo:first-child matches any primo element that is the first child of its parent foo[bar] matches any foo element that has a bar attribute, whatever the value foo[bar="Cheers"] matches any foo element that has a bar attribute with the value Cheers foo[bar~="horizontal"] 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.

Example TEI { background-color: red; margin: 1em 1em 1em 1em; }

Combined Properties

Some properties are combined for convenience. E.g., the last example on the previous slide is the same as TEI { background-color: red; margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; }

epigraph { border: thin solid blue; }

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.