Digital humanities


Maintained by: David J. Birnbaum (djbpitt@gmail.com) [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2016-10-17T14:48:01+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 inside 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 actual path to your 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 page, you can use:

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

Attaching CSS to XML

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. This line is processed for XML files (files with filenames that end .xml), but it’s ignored for HTML files (files with filenames that end .html), so in the case of HTML files you need to use the <link> element, as described above, instead.

Resources