XML and CSS

I wrote this page somewhere in 2000 and haven't updated it since.

The example crashes Explorer 5.2 on OS X.

Mozilla incorrectly gives the intro element a width of 100%, even though I don't define it.

This is a test case for combining XML and CSS. A story is marked up in XML and the display is controlled by a style sheet. On this page I explain a few things that I have done.

View the test file.

The XML

The basic XML structure is as follows:

<story>
	<chapter>
		<caption />
		<intro />
		<html:p /> (several if necessary)
			(may contain: <note />)
	</chapter>
	(more chapters if necessary)
</story>

<story> is the root of the document. It contains several <chapter>'s which in turn contain a <caption>, an <intro> and several paragraphs. I have invented all tags myself, except for the paragraphs. Here I wanted to use the CSS declaration P:first-line, giving a special style to the first line of each paragraph. It turned out that here I had to define real HTML paragraphs, which is done by

<html:p>Text and more text</html:p>

This in effect tells the browser to use an HTML tag, in this case <P>. We do need to define the so called HTML Name Space at the beginning of the XML document. This is done by making the first XML tag (the root, <story>):

<story xmlns:html="http://www.w3.org/TR/REC-html40">

If you don't define this, IE5 refuses to show the page, while Gecko does show the page and styles but doesn't recognize the <A> as a link. It does apply the style, though.

IE5 doesn't care where the actual link after xmlns:html points to (though there should be a link), but Gecko does. Without the correct link Gecko doesn't know how to render a P, for instance. Since the style sheets don't define P as a display: block (this is not necessary since an HTML P is always a block), Gecko doesn't form any blocks.

I also use

<html:a href="../js/contents.html" caption="JavaScript!">Towards...

and

<html:br />

in the same way. Explorer 5 gives an extra line break with the <br>, while Gecko simply applies one line break, as usual. Explorer's behaviour seems to be a minor bug.

Finally I use a tag <name> to give the first occurrence of each name a little style.

The CSS

Most of the style declarations I use are simple, well established ones. Let's discuss a few of the less usual:

intro {
	display: block;
	margin-left: 10%;
	margin-right: 20%;
	margin-top: 20px;
	font: 14pt verdana,arial,helvetica;
}

The style for the <intro> tag. Everything is normal, except for the display: block bit. This is necessary to declare, because the browser has no way of knowing that you want this to be a separate block of text. So you have to tell it to make it a block.

Let's view the style sheets for the <a>:

a, html\:a {font-weight: 600;
	text-decoration: none;
	color: #cc0000;}

a:hover, html\:a:hover {text-decoration: underline;
	font-size: 120%;}

a:before {
	color: #999999;
	content: "Link: "
	}

a:after {
	color: #999999;
	content: " :Endlink";
}

As you can see, I define the styles for a link both for a normal a and for the less usual html\:a. The first one is for Gecko, that simply sees the link as an element. The second one is for Explorer 5, that still sees the link in its context of HTML name space. For some reasons the : has to be escaped: \

Both the a and the html\:a are necessary for a proper cross-browser effect, though one of them will surely violate some or other spec. So I do the same for the hover style: a:hover, html\:a:hover.

Gecko has a very interesting extra possibility that I include here: to include a bit of text before and/or after an XML element. I included "Link: " before the link and " :Endlink" after it, giving them a gray colour. I did this by

a:before {
	color: #999999;
	content: "Link: "
	}

a:after {
	color: #999999;
	content: " :Endlink";
}

Other than these things the style sheet is pretty simple: font declaration, margin declaration, colour declaration where necessary. As you can see you can do anything to an XML tag that you can do to an HTML tag.