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.

element element descendant-element element > child-element element[attribute="value"] element:before or element:after

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). display: none | block | inline font-size: xx-small | x-small | small | medium | large | x-large | xx-large font-size: % | smaller | larger font-style: normal | italic | oblique font-weight: normal | bold | 900 font-family: serif | sans-serif | cursive | fantasy | monospace margin-left, margin-right, margin-top, margin-bottom: 1em, 2ex padding-left, padding-right, padding-top, padding-bottom: 1em, 2ex text-align: left | right | center | justify text-indent: 1em | 48px border: thin solid blue; color: red, #99AABB content: "stuff" | attr(attr_name) | ./image.png background-color: red, #99AABB background-image: url("./image.png") background-repeat: repeat | repeat-x | repeat-y | no-repeat background-attachment: scroll | fixed background-position: ( top | center | bottom ) ( left | center | right ) background-position: 20% 70%

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) ]]> 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: ]]> 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: Group your rulesets together by function. The stylesheet we’ve provided for this workshop lists all of the TEI elements available in our teaching schema, grouped together according to their function in the document (for instance, prose, poetry, phrase-level elements). This makes it easier to find and work with all of the elements that have a similar role. You can create multiple rulesets for the same element that control its behavior in different contexts, or with different attributes and values. For instance, you might want the quote element to look different when it is encoded as quote rend="block" or as quote rend="inline". Make sure you don’t create multiple rulesets with identical selectors, though.

Here are some things to check when your stylesheet isn’t working as expected: Make sure that your browser is actually reading the stylesheet— probably the most common error we see is that either the document or the stylesheet has been moved, but the href has not been changed to reflect the move Make sure that all of your property-value pairs are separated by semicolons Make sure every ruleset is enclosed within curly braces (don’t forget the brace at the end!) Check for typos (and especially typos in the element names, since oXygen can’t check these for you) Make sure the element you’re creating the ruleset for is really the element you’re looking at in your encoding Make sure that you don’t have two rulesets for the same element without realizing it.