Question

I have an xml file like this:

<?xml version="1.0" encoding="UTF-8"?>
<todo>
    <list><item>first</item><item>second</item></list>
    <list><item>first</item><item>second</item></list>
</todo>

Now I want to view the file in a browser. I want to have the <list> element rendered like a <ul> html-element, the <item> elements like <li> html-elements. i know that I can use xslt to transform the xml into an html document. but: is there a way to directly assign the html semantics to the elements of my list, e.g. with css (something like list{display:ul}) or a dtd?

Answer 1

Yes, this is possible.

See W3C-Website Style Sheets with XML.

You can use CSS to declare for each XML element how the browser should display it. But you have to be more verbose than in HTML, because for plain XML there are no predefined styles.

In the XML header add a reference to your CSS file:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="todo.css"?>
<todo>
   <list><item>first</item><item>second</item></list>
   <list><item>first</item><item>second</item></list>
</todo>

Here is an example CSS file (todo.css):

todo {
  display: block;
}

list {
  display: block;
  padding-left: 5mm;
  margin-top: 1cm;
}

item {
  display: list-item;
  list-style-type: circle;
}

For each element you can define the display style (block, inline, none, list-item).

For display: list-item you can additionally use the styles

• list-style-image: url(bullet.gif) to decalare a bullet icon graphic
• list-style-image with values inside or outside
• list-style-type with values circle, disc, square, none