Text Encoding Fundamentals: CSS Crib Sheet

This is more of a brief reference sheet than an exhaustive list of CSS terms: it is intended to provide you with a way to look up the information you’re most likely to need right away. For detailed information about CSS syntax, selectors, and properties, visit the W3C’s CSS tutorial pages at http://www.w3schools.com/css/.

CSS Rulesets

A CSS stylesheet is essentially a group of rulesets. Rulesets are made up of three things:

selectors
These are how you select which elements or groups of elements in your document will be affected by the style information.
properties
These identify the style properties (such as size or color) that are being controlled.
values
Each property has a specific value indicating the size, color, margin, or other style information that is being applied.

The syntax for combining these into a ruleset is simple. The selector comes first, followed by a set of one or more property-value pairs enclosed in curly braces and separated by semicolons: 

selector { property1: value1; property2: value2; }
For example: 
head { font-weight: bold; color: red;}
You may have as many property-value pairs as you like, but they must be separated by semicolons. Use whitespace liberally to make your rulesets easy to read.

Selectors

A selector is the way you identify the elements or groups of elements that will be affected by your style information. A selector may be simply the name of an element, or they may take into account the nesting of the element, or a specific attribute value.

Here’s a list of the most common selectors and their syntax.

Some examples:

me
matches all me elements
foo > bar
matches each bar element that is a child of a foo element
foo bar
matches each bar element that is a descendant of a foo element
primo:first-child
matches each primo element that is the first child of its parent
foo[bar]
matches each foo element that has a bar attribute, whatever the value
foo[bar="horizontal"]
matches each foo element that has a bar attribute with the value horizontal
foo[bar~="Cheers"]
matches each foo element whose bar attribute value is a list of space-separated words, one of which is Cheers
foo:before
matches before each foo; used to insert text (using content: keyword) before the content

Here are some more examples, using real-world TEI selectors, and some useful property-value pairs:

div { font-family: arial, sans-serif; padding-top: 2em; }
applies to all div elements, no matter how deeply nested
p { text-indent: 1em }
indents the first line of each paragraph 1 em space
bibl name {font-weight: bold;}
makes the name element bold only when it appears as a descendant of bibl
author > name { font-weight: bold; }
makes the name element bold only when it is a child of author (whitespace around > optional)
name[type="person"] {color: red;}
applies only to name when it has type="person" (whitespace in front of [ not allowed)
div[type="chapter"] > head {font-size:200%}
makes chapter headings larger
div[type="chap"]:before { content: "* * * * *"; text-align: center; }
inserts a line of asterisks before each chapter
item:before { content: attr(n) ". "; }
inserts the value of n, a space, and a period before each item in a list

Note that multiple selectors may be used at once, separated by commas. E.g.: 

rs[type="person"], name[type="person"], persName { color: red; }

Properties and values

Here’s a list of common properties and their most common kinds of values. Note that some properties (especially those that govern size) can be measured in several different ways. Some of the measurements are in absolute units such as pixels; others are relative to the font size (for instance, ems), and others are relative to the surrounding text (for instance, percentages or larger or smaller).

Languages and Quotation Marks

You can match elements in a particular language with the :lang pseudo-class. E.g., said:lang(fr) matches said elements that have an xml:lang that indicates the natural language is French (e.g., fr or fr-CA). If a said element does not have an xml:lang, then each ancestor element is examined in turn until an xml:lang is found. If none is ever found, the selector does not match.

There are special values to the content keyword for handling quoation marks. Namely open-quote and close-quote. They mean use the appropriate string from this element’s quotes property. See the following example. 

said { quotes: '"' '"' "'" "'"; }                         /* generic straigt double quotes w/ nested straight singles by default */
said:lang(en) { quotes: '\201C' '\201D' '\2018' '\2019' } /* same, but curly, for English */
said:lang(fr) { quotes: '«' ' »' }                        /* guillemets for French */
said:lang(de) { quotes: '»' '«' '\2039' '\203A' }         /* reversed guillemets w/ nested single angle quotes for German */
said:before { content: open-quote; }
said:after { content: close-quote; }

Associating a stylesheet with your XML document

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

<?xml-stylesheet type="text/css" href="filepath/my.css"?>
where filepath/my.css is the filepath and name of your CSS file, relative to your XML document. For example, here are the relevant lines from the template we provide for this workshop: 
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../../_utils/stylesheets/yaps-tei.css"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0" xml:lang='en'>
Note that the pointer to the stylesheet (href) is a URL, so the stylesheet can also live on the web.

Tips and Trouble-shooting

As you create more complex CSS stylesheets, there are a few things you can do to make your stylesheets more powerful and easy to manage:

Here are some things to check when your stylesheet isn’t working as expected: