Introduction to CSS

Maintained by: David J. Birnbaum (djbpitt@gmail.com)

Last modified: 2023-01-08T19:22:55+0000

Introduction to CSS

Basic information

CSS controls the presentation (styling) of XML (and HTML)
CSS is described in an external CSS stylesheet, an auxiliary document linked to your XML or HTML (there are other ways to associate CSS information with XML, but the external stylesheet is the most useful, and it’s what we’ll use here)
To associate your CSS with an HTML document, you need to insert a <link> element inside the HTML <header>, as described below. Note that the procedure for attaching CSS to HTML is different from the procedure for attaching CSS to other XML.
To associate your CSS with an XML document in <oXygen/>: Document → XML Document → Associate XSLT/CSS Stylesheet …, as described below. Note that the procedure for attaching CSS to XML is different from the procedure for attaching CSS to HTML.
What CSS can’t do
- Move elements to new locations (but see Flexbox, Grid, and the float property)
- Transform element content to create new content
Alternative (or companion) to CSS: eXtensible Stylesheet Language Transformations: XSLT (stay tuned)
Caution: fine-tuning CSS can be addictive.

How to write a stylesheet

Create a CSS rule for everything you want to style, using the information in your schema and your XML document instance, but …
- There are default styles (pretty vanilla)
- Most styles are inherited from ancestor elements. E.g., a style applied to the root element applies to all child elements unless you override it, etc.
To take advantage of inheritance, I usually work from the outside in.
Components of a CSS statement (Note: this presentation is for CSS in HTML, not generic XML, and a few of the details differ)
- Example:
```
header {
    text-align: center;
    font-weight: bold;
}
```
- Selector: CSS can identify elements by element type (generic identifier, abbreviated gi), attribute values, context (parent and ancestor elements), etc. The selector must be followed by a pair of curly braces with the actual style declarations between them.
- Property: CSS can style for font, color, margins, borders, etc. The property specifies the styling detail (e.g., color), the value specifies how it is styled (e.g., a specific color). The property name must be followed by a colon.
- Value: The property value must be followed by a semicolon. Property values that contain spaces (some do, such as some font names) must be enclosed in quotation marks (single or double, as long as they’re both the same); confusingly, in most other cases quotation marks are prohibited.
There are also pseudo-classes and pseudo-elements. The following will frame elements marked up as <title type="poem"> … </poem> in asterisks:
```
title[type = "poem"]::before {
    content : "*";
}
title[type = "poem"]::after {
    content : "*";
}
```
See the MDN Pseudo-classes and pseudo-elements page for more information.

The selector in the example above chooses elements of type <title> if and only if they have an attribute with the name @type that has the value poem.
You can’t make up CSS properties or acceptable values. E.g., if you try to set the color of an element to “pinkGloriousPink!”, that setting will be ignored. You can learn the legal properties and values from the references below.

Attaching CSS to a document

The procedure for associating a CSS stylesheet with a document is different from XML than for HTML. Sigh.

Attaching CSS to HTML

To attach CSS to HTML (including XHTML) you need to insert the HTML element <link> with the @rel, @type, and @href attributes as a child of the <head> of the HTML document. That is, inside the <head> insert the following element:

<link rel="stylesheet" type="text/css" href="style.css"/>

@rel stands for relationship, the type of link, and this value says that you’re linking to a stylesheet (there can be other types of links). The @type attribute is really a sort of subtype; it says that not only are you linking to a stylesheet (already specified in the @rel attribute), but that the stylesheet is CSS (there are other types of stylesheets). @href stands for hypertext reference, and points to the stylesheet file. You should replace style.css with the path to your own stylesheet. If your stylesheet is in the same directory as your HTML, the path is just the filename. If it’s in a subdirectory called, for example, css, create a path to it, e.g., href="css/style.css". The value of the @href attribute can also be a URL, that is, a web address. To include the default Obdurodon styles in your own page you can use:

<link href="http://www.obdurodon.org/css/style.css" rel="stylesheet" type="text/css"/>

Attaching CSS to XML (but not XHTML)

To attach CSS to XML in <oXygen/>, select Document → XML Document → Associate XSLT/CSS Stylesheet and navigate to the CSS file. <oXygen/> will insert a line near the top of your document to specify the association. HTML 5 with XML syntax is both HTML and XML, so in principle you could use either method, but we recommend using the HTML linking because it is easier to work with in the browser debugging environments.

<oo>→<dh> Digital humanities