Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2023-01-08T19:22:55+0000

Introduction to CSS

Basic information

How to write a stylesheet

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="" 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.